背景
在前端开发中，弹出框是一个非常常见的组件，而 Angular 框架提供的 Bootstrap Modal 组件功能十分强大和易用。但是，使用起来还是有一定的难度，因此出现了很多封装好的第三方库以便简化操作。
在这里，我们将介绍 angularx-bootstrap-modal 这个 npm 包的使用教程。
安装
首先，我们需要通过 npm 安装 angularx-bootstrap-modal：
npm install angularx-bootstrap-modal --save
引入
在我们需要使用 Bootstrap Modal 的组件中，需要引入 angularx-bootstrap-modal 包：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------------
--------- -------------------
--------- -
---- ---------------------
--- ----------------------------------
------- ------------- ------------- -------------------- ------------------ ----------------------- ------------------------------------------
------
---- ------------------------------------
---- ---------------------
------- ------------- ---------- ------------- - --------------------------------
------- ------------- ---------- ---------- ----- ------------------------------------
-------
--
----- -------------------- -
------ -------
-------- -------
------------------- ------------ ------------ - -
------- -
------------------------
-
--------- -
--------------------
------------------------
-
-
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- ------------- - -
----------- -
----- -------- - ---------------------------------------------
---------------------- - ------ -------
------------------------ - ------ ---------
-
-可以看到，通过 import { ModalService } from 'angularx-bootstrap-modal'; 引入模块，然后在组件的构造函数中注入 ModalService。在 openModal() 函数中，使用 this.modalService.show(CustomModalComponent) 来显示自定义的 component，通过 modalRef.content 来给 component 填充数据，最后结果就是一个带有标题、文字、警示框等元素的弹出框。
改进
通过以上代码，我们可以很容易地使用 bootstrap modal 了，但是这只是最简单的使用方式，没有考虑太多的场景。比如，当我们需要在项目中频繁地使用弹出框时，我们通常会将组件封装起来，以便更好地重用，以及更好地管理。
-- -------------------- ---- -------
------ - ---------- ------------- ------ ------ - ---- ----------------
------ - ---------- - ---- ----------------------
------------
--------- ------------
--------- -
---- ---------------------
--- ----------------------------------
------- ------------- ------------- -------------------- ------------------ ----------------------- ------------------------------------------
------
---- -------------------
----- -----------------------------
-------------------------
------
---- ---------------------
------- ------------- ---------- ------------- - ----------------------------------------
------- ------------- ---------- ---------- ----- --------------------------------------------
------
-
--
------ ----- -------------- -
-------- ------ -------
-------- -------- -------
-------- ---------- ------ - --------
-------- ------------ ------ - ----------
--------- ------- - --- ---------------
------------------ ----------- ----------- - -
------- -
-----------------------
-
-在这里，我们封装了一个新的 ModalComponent，包含了更多的属性和事件，可以更好地满足不同场景的需求。在需要使用弹出框时，我们不再需要再创建一个新的 component，而是直接使用封装好的 ModalComponent 来获取更好的扩展性和重用性。
-- -------------------- ---- -------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- ------------- - -
----------- -
----- -------- - ---------------------------------------
---------------------- - ------ -------
------------------------ - ------ ---------
-------------------------- - ---------
---------------------------- - -----
------------------------------------- -- -
--------------------
----------------
---
-
-在这里，我们通过 modalRef.content.confirm.subscribe(() => {...}) 实现了自定义的 confirm 事件，更好地控制了弹出框的行为。
总结
通过学习以上内容，我们了解了如何使用 angularx-bootstrap-modal 这个 npm 包来简化 bootstrap modal 的操作。并且，我们也封装了一个新的 ModalComponent，放在项目中以便更好地重用和抽象。在实际项目中，我们可以更多地利用这个包来实现更为灵活的弹出框，从而提升我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cab81e8991b448e6191