介绍
ng2-flashbox 是一个 Angular 2+ 的 npm 包，允许你轻松地在网站上添加弹出窗口。它是使用 Typescript 编写的，并涵盖了可自定义的各种属性。
在本文中，我们将学习如何在 Angular 2+ 中使用 ng2-flashbox，包括如何安装和配置它，如何创建和使用它。
安装
要在你的项目中使用 ng2-flashbox，首先需要安装它。你可以在终端中打开项目文件夹，并运行下面的命令来完成安装：
npm install ng2-flashbox
配置
在安装完成后，你可以把下面的 import 语句加入到你的项目中，以使用 ng2-flashbox：
import { FlashboxModule } from 'ng2-flashbox';接着，在你的 Angular 模块中，你需要添加 FlashboxModule 到 imports 数组中：
-- -------------------- ---- -------
-----------
------------- -
------------
--
-------- -
--------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在，你已经成功配置了 ng2-flashbox，可以在项目中使用它了。
创建和使用
要创建一个 flashbox，需要使用 FlashboxService。你可以将它添加到组件的 constructor 中：
import { FlashboxService } from 'ng2-flashbox';
constructor(private flashboxService: FlashboxService) {}接着，你可以创建一个 flashbox，通过调用 flashboxService.create() 方法：
this.flashboxService.create({
title: 'My Flashbox',
message: 'This is my Flashbox!',
okButtonText: 'Confirm',
cancelButtonText: 'Cancel'
})通过 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