背景
@rocketloop/angular2-modal 是一个针对 Angular 2+ 的模态框框架，可以帮助前端工程师高效地制作各种模态框，包括 alert、confirm、prompt 等等。
安装
使用它的前提是要先安装它。 输入以下命令即可完成安装：
--- ------- -------------------------- ------
如何使用
在安装好包之后，你需要先导入其相关模块：
------ - ----------- - ---- ----------------------------- ------ - -------------------- - ---- -----------------------------------------------
至于 BootstrapModalModule 的引入是因为它提供了 Bootstrap 样式的支持，如果使用其它样式主题的话需要相应修改。
在使用时，你需要通过依赖注入的方式使用 ModalService：
------ - ------ --------------------- - ---- -----------------------------
------------
--------- -----------------
--------- -------- -------------------------- ---------------
--
------ ----- ------------- -
------------------- ------ ------ --
----------- -
--- --------- - ----- -- --- ----- ---------
--- ----- - --------------------------------- --- -----------------------
-------------------
------------- -------
----------
-
-具体来说，ModalService 提供了 open 方法，你需要传递两个参数。第一个参数是你所定义的 Modal Component，第二个参数则是 modal 的一些参数，例如内容、标题等等。
我们需要在 Component 中定义所需的 modal 参数，这里我们仅包含消息和标题两个属性，MyModalComponent 如下：
------ - --------- - ---- ----------------
------ - ---------- --------------- ---------- - ---- -----------------------------
------------
--------- -----------
--------- -
---- ---------------------
--- ----------------------------------
------
---- -------------------
------------------
------
---- ---------------------
------- ------------- ---------- ------------ -----------------------------------
------
-
--
------ ----- ---------------- ---------- ----------- ------------------------------ -
-------- ---------------
------ -------- -------
------ ------ -------
------------------ ------- -------------------------- -
------------ - ---------------
------------ - ---------------------
---------- - -------------------
---------------------------
-
----------- ---- -
--------------------
-
-
------ ----- -------------- ------- -------------- -
------------------ -------- ------- ------ ------ ------- -
--------
-
-顺带一提: import { BSModalContext } from '@rocketloop/angular2-modal/plugins/bootstrap';。
这个 Component 访问了 DialogRef 和 CloseGuard，两者都来自 '@rocketloop/angular2-modal'，DialogRef 用于获得 Modal 中的参数，CloseGuard 表示点击遮罩背景时是否关闭 Modal。
最后，通过这些配置之后我们就可以看到我们定义出的 Modal 了：
总结
在本文中，我们介绍了 @rocketloop/angular2-modal 的安装和使用。它为我们提供了许多可定制的选项，以便根据自己的需求制作出不同种类的模态框。使用则需注意导入相关的模块，并且需要定义所需的 modal 参数以及 Modal Component。
建议读者在使用时结合官方文档进行深入了解。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fc781e8991b448dd436