前言
在前端开发中，弹窗组件是一个经常使用的功能模块。Angular 是一门流行的前端框架，它提供了很多方便易用的组件库。但是，有时候我们需要使用自定义的弹窗组件以满足特定需求。这时候，npm 包 angular-dialog-service 就可以派上用场了。
angular-dialog-service 是一个基于 Angular 的弹窗组件库，它提供了丰富的配置选项和可扩展的回调函数，功能十分强大。本文将详细介绍 angular-dialog-service 的使用方法，帮助读者快速上手。
安装
使用 npm 安装 angular-dialog-service：
npm install angular-dialog-service --save
引入
在 Angular 项目中引入 angular-dialog-service：
import { DialogService } from 'angular-dialog-service';
@NgModule({
// ...
providers: [DialogService],
// ...
})
export class AppModule {}使用
显示弹窗
使用 DialogService 的 addDialog 方法显示一个弹窗：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
------ - ----------------- - ---- ------------------------
------------
--------- -----------
------------ ------------------------
---------- -------------------------
--
------ ----- ------------- -
------------------- -------------- -------------- --
------------- ---- -
----------------------------------------------- -
------ --- ------ -------
-------- --- ------ ---------
------------ -----
----------- --------
---
-
-addDialog 方法接受两个参数，第一个参数是要显示的组件，第二个参数是弹窗配置选项。在上面的示例中，我们传递了一个自定义的 MyDialogComponent 组件，并设置了弹窗的标题、消息、确认按钮和取消按钮。
接收输入参数
如果需要向弹窗组件传递参数，可以通过第三个参数进行传递：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
------ - ----------------- - ---- ------------------------
------------
--------- -----------
------------ ------------------------
---------- -------------------------
--
------ ----- ------------- -
------------------- -------------- -------------- --
------------- ---- -
----------------------------------------------- -
------ --- ------ -------
-------- --- ------ ---------
------------ -----
----------- --------
-- -
----- ----- -----
---- --
---
-
-在上述示例中，我们传递了一个对象 {name: 'John Doe', age: 30} 作为第三个参数。在 MyDialogComponent 中，可以通过 data 属性获取到这个对象：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- ---------- - ---- -------------------------
------------
--------- ----------------
------------ -----------------------------
---------- ------------------------------
--
------ ----- ----------------- -
------------
------------------ ------- ---------- ----------
------------------- ------ ----- - ----- ------- ---- ------ -
- --
------------ ---- -
-----------------------
-
----------- ---- -
-----------------------
-
-处理回调函数
使用 addDialog 方法时，还可以传递一个可选的第四个参数，用于处理弹窗的回调函数。例如，我们可以在弹窗确认按钮被点击时执行一段代码：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
------ - ----------------- - ---- ------------------------
------------
--------- -----------
------------ ------------------------
---------- -------------------------
--
------ ----- ------------- -
------------------- -------------- -------------- --
------------- ---- -
----------------------------------------------- -
------ --- ------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------