介绍
ng2-flashbox 是一个 Angular 2+ 的 npm 包，允许你轻松地在网站上添加弹出窗口。它是使用 Typescript 编写的，并涵盖了可自定义的各种属性。
在本文中，我们将学习如何在 Angular 2+ 中使用 ng2-flashbox，包括如何安装和配置它，如何创建和使用它。
安装
要在你的项目中使用 ng2-flashbox，首先需要安装它。你可以在终端中打开项目文件夹，并运行下面的命令来完成安装：
--- ------- ------------
配置
在安装完成后，你可以把下面的 import 语句加入到你的项目中，以使用 ng2-flashbox：
------ - -------------- - ---- ---------------
接着，在你的 Angular 模块中，你需要添加 FlashboxModule 到 imports 数组中：
-----------
------------- -
------------
--
-------- -
--------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在，你已经成功配置了 ng2-flashbox，可以在项目中使用它了。
创建和使用
要创建一个 flashbox，需要使用 FlashboxService。你可以将它添加到组件的 constructor 中：
------ - --------------- - ---- --------------- ------------------- ---------------- ---------------- --
接着，你可以创建一个 flashbox，通过调用 flashboxService.create() 方法：
----------------------------- ------ --- ---------- -------- ----- -- -- ----------- ------------- ---------- ----------------- -------- --
通过 create() 方法，可以传递配置选项。这些选项可以是：
- title - 弹出窗口的标题
- message - 弹出窗口中的消息
- okButtonText - 确定按钮的文本
- cancelButtonText - 取消按钮的文本
要接收 flashbox 的结果，可以在 create() 方法中使用 then() 和 catch() 方法：
----------------------------- ------ --- ---------- -------- ----- -- -- ----------- ------------- ---------- ----------------- -------- ---------------- -- - --------------------- ------ ---- --------- -------- ---------------- -- - ------------------ ----------- ------- ---
在成功或失败时，分别会调用 then() 或 catch() 方法并传递一个结果对象。
总结
完成本教程后，你可以开始使用 ng2-flashbox 来在你的网站中添加弹出窗口，并可以自定义它们的属性。如果需要更进一步的指导，可以查看 ng2-flashbox 的官方文档。
示例代码
下面是一个完整的 Angular 2+ 组件代码，演示如何使用 ng2-flashbox：
------ - --------- - ---- ----------------
------ - --------------- - ---- ---------------
------------
--------- -----------
--------- -
------- -------------------------- -----------------
-
--
------ ----- ------------ -
------------------- ---------------- ---------------- --
----------- -
-----------------------------
------ --- ----------
-------- ----- -- -- -----------
------------- ----------
----------------- --------
---------------- -- -
--------------------- ------ ---- --------- --------
---------------- -- -
------------------ ----------- -------
---
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562da81e8991b448e03be