在前端开发中，对话框 (dialog) 是一个常见的组件。它可以用于展示信息、收集用户输入、确认操作等等。在 Angular 2 中，我们可以使用 Angular Material 提供的组件库来实现对话框。
安装 Angular Material
首先，我们需要安装 Angular Material。在项目根目录下执行以下命令：
npm install --save @angular/material @angular/cdk @angular/animations
其中，@angular/animations 是 Angular 动画库，@angular/cdk 是 Angular 组件开发工具包。
然后，在项目的 app.module.ts 文件中引入所需的模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- ---------------------------
------ - --------------- - ---- ---------------------------
-----------
-------- -
------------------------
----------------
---------------
--
-------- -
----------------
---------------
-
--
------ ----- -------------- --在 imports 数组中引入 BrowserAnimationsModule 和 MatButtonModule、MatDialogModule 模块，并在 exports 数组中导出这些模块，以便在应用中使用。
打开对话框
接下来，我们来创建一个简单的对话框。在组件中引入 MatDialog，并在需要打开对话框的地方调用 open 方法即可：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------------------
------------
--------- -----------
--------- -
------- ----------------- -------------------------------------
-
--
------ ----- ------------ -
------------------ ------- ---------- --
------------ -
----- --------- - ----------------------------------
---------------------------------------- -- -
-------------------------------
---
-
-
------------
--------- -------------
--------- -
--- ---------------------------
--------------------
-----
---------------------
--------------------
------- ---------- ---------------------------------
------- ---------- -------------------------------------
---------------------
-
--
------ ----- --------------- -
------------------ ---------- ------------------------------ --
------------ ---- -
----------------------------
-
-在 AppComponent 中，我们引入了 MatDialog 并在 openDialog 方法中调用 this.dialog.open 方法打开对话框。open 方法接收一个组件作为参数，用于渲染对话框的内容。我们在这里传入 DialogComponent 组件。
open 方法返回一个 MatDialogRef 对象，它是对话框的引用。我们可以通过它来订阅对话框的关闭事件，并获取对话框的结果。
在 DialogComponent 中，我们定义了对话框的内容。其中，mat-dialog-title 用于设置对话框的标题，mat-dialog-content 用于设置对话框的内容，mat-dialog-actions 用于设置对话框的操作按钮。
在操作按钮中，我们使用了 mat-dialog-close 指令来关闭对话框。它接收一个值，表示对话框的结果。在这里，我们将确定按钮的值设置为 true，并在取消按钮的点击事件中调用 this.dialogRef.close(false) 来关闭对话框并返回 false。
自定义对话框
除了使用 MatDialog 提供的对话框组件外，我们还可以自定义对话框。具体来说，我们可以在对话框组件中添加任意的 HTML 内容，并在 MatDialogRef 中添加自定义方法。
下面是一个自定义对话框的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------------
--------- --------------------
--------- -
---------------
----- ------- ------
------- ---------- ---------------------------------
------- ---------- --------------- ----------------------------------
-
--
------ ----- --------------------- -
-------- -------
------------------ ---------- ------------------------------------ --
------------ ---- -
---------------------------
-
------------- ---- -
----------------------------
-
-在这个组件中，我们添加了一个 message 属性，用于展示对话框的内容。同时，我们在 onNoClick 和 onYesClick 方法中分别调用 this.dialogRef.close 方法来关闭对话框并返回不同的结果。
在打开对话框的地方，我们需要使用 MatDialog 的 open 方法，并通过 MatDialogConfig 对象来配置对话框的属性。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- --------------- - ---- ---------------------------
------ - --------------------- - ---- ----------------------------
------------
--------- -----------
--------- -
------- ----------------- -------------------------------------
-
--
------ ----- ------------ -
------------------ ------- ---------- --
------------ -
----- ------------ - --- ------------------
------------------------- - -----
---------------------- - -----
----------------- - -
-------- ---------
--
----- --------- - --------------------------------------- --------------
---------------------------------------- -- -
-------------------------------
---
-
-在这里，我们使用 MatDialogConfig 对象来配置对话框的属性。其中，disableClose 表示是否禁用关闭按钮，autoFocus 表示是否自动聚焦第一个输入框，data 表示传递给对话框的数据。
在打开对话框的地方，我们通过 this.dialog.open 方法来打开自定义对话框。同时，我们还可以订阅 MatDialogRef 的 afterClosed 事件，来获取对话框的结果。
总结
在本文中，我们介绍了如何在 Angular 2 中使用 Angular Material 提供的组件库来实现对话框。具体来说，我们使用了 MatDialog 来打开对话框，并使用了自定义对话框来展示更加灵活的内容。希望本文能够帮助你更好地理解 Angular 2 中的对话框组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c013c4add4f0e0ff9c6e30