在前端开发中，Modal 对话框是非常常见的组件。如果要自己编写一个对话框组件，不仅需要耗费大量时间，还需要考虑各种浏览器兼容性问题，而且可能出现各种 bug。而引用已有的组件，可以大大提高开发效率和质量。这里介绍一个 npm 包，gh-angular2-modal，提供了 Angular 2 的 Modal 对话框组件，使用简便，功能强大。
安装
使用 npm 进行安装：
npm install gh-angular2-modal --save
使用 gh-angular2-modal
引用 gh-angular2-modal 组件：
import { Modal } from 'gh-angular2-modal';定义一个组件，例如
MyComponent：-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----- - ---- -------------------- ------------ --------- --------------- --------- - ------- --------------------- -------------- - -- ------ ----- ----------- - ------------------- ------ ------ -- ------- ---- - ---------------------- -- - ----------- - -在
show方法中，可以调用modal提供的多种方法，例如alert，confirm等，非常方便。在 app.module.ts 中定义
ModalModule：-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- -------------------- ------ - ------------ - ---- ------------------ ------ - ----------- - ---- ----------------- ----------- -------- --------------- ------------- ------------- -------------- ------------- ---------- -------------- -- ------ ----- --------- --
最后，可以在 AppComponent 的模板中添加 MyComponent：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ---------
--------- -
-----------------------------
-
--
------ ----- ------------ --这样，就完成了使用 gh-angular2-modal 进行对话框开发的简单示例。
方法列表
gh-angular2-modal 提供了多种对话框组件，以下为对话框的方法列表：
public alert(message: string): Promise<boolean>: 弹出一个带有确定按钮的对话框，显示参数 message 中的内容。public confirm(message: string): Promise<boolean>: 弹出一个带有确定和取消按钮的对话框，显示参数 message 中的内容。public prompt(message: string, value: string): Promise<string>: 弹出一个带有输入框、确定和取消按钮的对话框，显示参数 message 中的内容和输入框中默认值 value。public dialog(component: any, data: any): Promise<any>: 弹出一个自定义的对话框，需要传入要显示的组件及组件所需的数据。
另外还有一些参数可以在 Modal 的 config 中进行配置，例如对话框的标题、按钮的文本、样式等。
总结
通过使用 gh-angular2-modal 这个 npm 包，发现对于对话框的开发来说可以极大地提高工作效率，尤其是那些不需要复杂自定义对话框的场景。并且，在编码中避免了很多与浏览器兼容性有关的问题，确保了代码可靠性。同时，我们也加深了对于 Angular 2 官方文档所提及的各种技术点的理解，这对开发人员也是一个非常好的学习和提高的机会。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055abe81e8991b448d8588