Angular Material 对话框

使用 MatDialog 服务打开带有内容设计、样式和动画的对话框。 MatDialogRef 提供了打开对话框的句柄。

它用于关闭对话框并接收关闭对话框的通知。当对话框关闭时，任何通知观察器都将完成。

MatDialog 创建的组件可以注入 MatDialogRef 并关闭它们所在的对话框。 关闭时可以提供可选的结果值。 结果将作为进一步的观察转发。

通过 entryComponents 配置对话框内容

MatDialog 在运行时安装组件，但 Angular 编译器需要额外的信息来创建对话框组件所需的组件。

要将任何组件加载到对话框中，您应该在计算机列表的 NgModule 定义中包含组件类。 因此，Angular 编译器知道如何为 NgModule 创建组件。

指定全局配置默认值

通过在根模块中为 mat_dialog_default_options 提供 MatDialogConfig 的实例来指定默认的对话框选项。

如果您使用模板对话框 (TemplateRef)，数据将在模板中可用

app.component.html

app.component.ts

dialog-data-example-dialog.html

输出

当我们单击“打开对话框”按钮时，它将显示以下对话框框。

对话框内容

一些指令可用于简化对话框内容

例如

一旦对话框打开，对话框就会聚焦于表格元素。 我们可以使用 tab index 属性控制该元素。

可访问性

默认情况下，每个对话框在父元素上都有 role = "dialog"。 打开时，可以通过 MatDialogConfig 将角色更改为 alertdialog。

aria-labeled、aria-labelledby 和 aria 描述的属性都可以通过 MatDialogConfig 设置到对话框元素。 每个对话框都有一个通过 aria-labeled 设置的标签。

内容对话框使用焦点陷阱来防止用户进入背景元素。 一旦对话框关闭，它将聚焦于对话框打开之前的聚焦元素。

焦点管理

对话框中的第一个表格元素将在打开时获得焦点。 通过对话框元素进行制表，将聚焦于对话框元素，当 tab 键到达序列的末尾时，将返回到第一个表格元素。

焦点恢复

对话框聚焦于在对话框打开时聚焦的元素。 预先居中的元素不存在于 DOM 中，例如 菜单项。 然后您可以在 MatDialogRef 上的观察之后手动订阅焦点。

键盘交互

默认情况下，按 Esc 键将关闭对话框。 用户通常应避免这样做，因为可以通过禁用选项将其关闭，因为它会破坏屏幕阅读器用户的预期交互模式。 让我们看一个例子。

app.component.html

app.component.ts

dialog-overview-example-dialog.html

输出