在Angular中，如果要实现在前端页面上弹出对话框，可以使用Angular Material中提供的MatDialog组件。MatDialog是一个可定制的Angular Material对话框，允许在Angular应用程序中简单地显示模态窗口。
安装Angular Material
要使用Angular Material中的MatDialog组件，需要先安装Angular Material。在终端中，运行以下命令来安装Angular Material：
ng add @angular/material
安装完成之后，需要在项目中引入所需的Angular Material组件。在app.module.ts文件中添加：
import {MatDialogModule} from '@angular/material/dialog';并将MatDialogModule添加到“@NgModule.imports”数组中。
弹出式对话框
接下来，我们来看一下如何在Angular应用程序中使用MatDialog组件来实现弹出式对话框。
- 在组件中引入MatDialog
在需要使用对话框的组件中，需要先引入MatDialog组件：
import {MatDialog} from '@angular/material/dialog';- 弹出对话框
要弹出对话框，可以使用MatDialog的open()方法。该方法的参数可以是对话框组件或一个组件工厂。示例如下所示：
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ----------- ---- ---------------------------
------------
--------- -------------
--------- -
--- -----------------------------
----------------------- --- --------------------------
--------------------
------- ---------- ----------------------------
------- ---------- --------------------------------------
---------------------
--
--
------ ----- --------------- --
------------
--------- -----------
------------ ------------------------
--
------ ----- ------------- -
------------------ ------- ---------- --
------------ -
----------------------------------
-
-在示例代码中，我们定义了两个组件：TestComponent和DialogComponent。TestComponent中有一个按钮，点击该按钮会弹出对话框。在openDialog()方法中，我们使用MatDialog的open()方法来打开对话框，传入的参数是DialogComponent组件，表示要在对话框中显示DialogComponent组件。在DialogComponent中，我们定义了对话框的标题、内容和动作。
- 传递数据到对话框
有时需要将数据传递给对话框，例如用户需要在对话框中输入一些信息。要传递数据，可以将数据作为open()方法的第二个参数，然后在对话框组件中将数据注入到组件中。示例如下所示：
-- -------------------- ---- -------
------ ----------- ------- ---- ----------------
------ ----------- ------------- ---------------- ---- ---------------------------
------------
--------- -------------
--------- -
--- -------------------------------
--------------------
------------------
--------------- ---------------------------
------ -------- ----------------------- ------------------ -------
-----------------
---------------------
--------------------
------- ---------- ----------------------------
------- ---------- -------------------------------------------
---------------------
--
--
------ ----- --------------- -
------ -------
-------- -------
---------- -------
---------- -------
------------
------ ---------- ------------------------------
------------------------ ------ ----- ---
- -
---------- - -----------
------------ - -------------
-------------- - ---------------
-------------- - ---
-
-
------------
--------- -----------
------------ ------------------------
--
------ ----- ------------- -
------------------ ------- ---------- --
------------ -
----- --------- - --------------------------------- -
----- ------- ------ ------- -------- --- ---------- --------
---
---------------------------------------- -- -
--------------------
---
-
-在示例代码中，我们再次定义了TestComponent和DialogComponent组件。在openDialog()方法中，我们使用MatDialog的open()方法打开对话框，并将数据传递给对话框组件。在DialogComponent组件中，我们通过@Inject(MAT_DIALOG_DATA) public data: any注入传递的数据，并在组件中使用数据。当对话框中的“确认”按钮被点击时，我们将输入框中的值返回到TestComponent组件中。
结论
MatDialog是一个非常实用的Angular Material组件，可以用于实现弹出式对话框。尽管在组件中使用MatDialog非常简单，但在实际项目中可能会遇到各种各样的问题。因此，需要深入学习并通过不断的实践来掌握使用MatDialog的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6708f327d91dce0dc8756a32