ng2-simple-modal 是一个 Angular 2 模态框组件的 npm 包，它提供了基本的模态框功能，如弹出框，确认框，提示框等等。下面是一个详细的使用教程，包括了安装，组件属性，使用示例等。
安装
安装 ng2-simple-modal 可以使用 npm 命令：
npm install ng2-simple-modal --save
此外，你还需要安装 Angular2 的模板和表单模块：
npm install --save @angular/forms @angular/http
引入模块
你需要在你的模块中引入 ng2-simple-modal 模块，并声明它：
import { ModalModule } from 'ng2-simple-modal';
@NgModule({
imports: [
ModalModule
]
})组件属性
ng2-simple-modal 组件包含以下属性：
- title：模态框的标题
- message：模态框的信息
- cancelButtonText：取消按钮的文本
- confirmButtonText：确认按钮的文本
- showCancelButton：是否显示取消按钮
- showConfirmButton：是否显示确认按钮
- animation: 模态框的动画效果
- closable：是否可以通过点击背景关闭模态框
- backdropColor：背景颜色
使用示例
下面是一个示例代码，展示了如何使用 ng2-simple-modal 组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- -----------
--------- -
------- ----------------------------------------
--
------- --
--
------ ----- ------------ -
------------------- ---------------------------- - -
------------- -
-----------------------------------------
------------------- -- -
------------ -
-- ----------
-
--
-
-在上面的代码中，我们使用了 ng2-simple-modal 提供的 DialogService 服务，通过 confirm 方法打开了一个确认框，并监听了用户的确认结果。
指导意义
ng2-simple-modal 作为一个 Angular 2 的模态框组件，为我们开发带来了很大的方便。在实际项目中，我们可能需要大量使用模态框，ng2-simple-modal 模块提供了多样的模态框风格，并且支持自定义模态框，让我们可以快速方便的完成我们的业务需求。
同时，在学习 ng2-simple-modal 模块的过程中，我们也深入了解了 Angular 2 组件的使用方式和动态切换模板的技巧，这对我们以后的开发也有很大的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609481e8991b448dec78