在前端开发中，模态框（Modal）是一种非常常见的UI控件，可以用于提示用户，展示内容或收集信息等等。dsg-ng2-bs4-modal是一个基于Bootstrap 4和Angular 2的开源npm包，提供了一套易于使用的模态框组件，下面是使用教程。
安装
通过npm安装dsg-ng2-bs4-modal。
npm install dsg-ng2-bs4-modal –save
导入模块
在你的app.module.ts中引入模块。
-- -------------------- ---- -------
------ - -------------- - ---- --------------------
-----------
-------- -
--------------
--
-- ---
--
------ ----- --------- - -使用
在需要使用模态框的组件中引入modal服务。
-- -------------------- ---- -------
------ - --------------- - ---- --------------------
------------
-- ---
--
------ ----- ----------- -
------------
------- ------------- ---------------
- - -
------ ----------- -
-- -----
-----------------------------------
-
------ ------------ -
-- -----
------------------------------------
-
-在组件的HTML中添加模态框。
-- -------------------- ---- -------
---------- -------- --------------
---- ---------------------
--- ---------------------- ----------
------- ------------- ------------- -------------------------------------
------
---- -------------------
---- -- -- ------
------
---- ---------------------
------- ------------- ---------- -------------- -------------------- -------------------------------------
------
------------在组件的HTML中调用打开模态框的方法。
<button (click)="openModal()">Open Modal</button>
现在你就可以在你的组件里使用dsg-ng2-bs4-modal了。
意义和学习
使用dsg-ng2-bs4-modal可以让开发者更快捷、简单地实现模态框，并且也可以提高项目的代码可重用性，减少开发成本以及加速开发时间。
学习此类npm包可以提高开发者对于模块化开发的认识，也可以提高对于Angular和Bootstrap相关知识的掌握度，并且也对于npm的使用有了更深层次的了解。
示例代码
完整的示例代码如下。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ ----------------- ---- --------------------
------------
--------- -------------------
--------- -
------- -------------------------- --------------
---------- -------- --------------
---- ---------------------
--- ---------------------- ----------
------- ------------- ------------- -------------------------------------
------
---- -------------------
---- -- -- ------
------
---- ---------------------
------- ------------- ---------- -------------- -------------------- -------------------------------------
------
------------
-
--
------ ----- ----------- -
------------
------- ------------- ---------------
- - -
------ ----------- -
-- -----
-----------------------------------
-
------ ------------ -
-- -----
------------------------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571a81e8991b448d407b