Angular Material Dialog 完全指南MatDialog 的打开、传值、焦点管理与无障碍实践【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本指南以 Angular Material 官方文档中 Dialog 使用说明 为骨架结合本仓库 Dialog 模块源码 与 组件示例系统讲解MatDialog服务的完整使用方式从最基本的打开与关闭、配置项的逐项含义、全局默认值、数据共享到焦点管理与 ARIA 无障碍模式。读完本文你将能够独立实现一个符合 Material Design 规范、可访问、可复用的模态对话框并理解其底层实现原理。一、MatDialog 是什么MatDialog是 Angular Material 提供的模态对话框服务基于 CDK 的Dialog与Overlay机制构建。它负责打开带有 Material Design 样式和过渡动画的模态窗口并将对话框内容渲染在独立的 overlay 层中。服务本身定义在 dialog.tsService() export class MatDialog implements OnDestroy { // ... }使用MatDialog前需要将其注入到组件中如示例 dialog-overview-example.tsreadonly dialog inject(MatDialog);同时在组件或应用级别引入必要的模块/导入示例中直接以 standalone 方式导入指令与按钮模块import {MatButtonModule} from angular/material/button; import { MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle, } from angular/material/dialog;二、打开对话框open 方法与 MatDialogRef对话框通过调用MatDialog.open打开第一个参数传入要加载的组件第二个参数是可选配置对象let dialogRef dialog.open(UserProfileComponent, { height: 400px, width: 600px, });open方法有两个重载分别支持组件对话框与模板对话框见 dialog.ts 的方法签名。无论哪种形式open都会返回一个MatDialogRefT, R实例作为已打开对话框的句柄。MatDialogRef 提供的核心能力MatDialogRef定义在 dialog-ref.ts其职责包括关闭对话框调用close(result?)可携带可选的关闭结果订阅生命周期通知afterClosed()、beforeClosed()、afterOpened()返回的 Observable 在对话框关闭/打开时发出事件且所有通知 Observable 在对话框关闭后都会 complete监听交互事件backdropClick()、keydownEvents()动态更新外观updatePosition()、updateSize()、addPanelClass()/removePanelClass()查询状态getState()返回MatDialogState枚举OPEN/CLOSING/CLOSED。典型用法是订阅关闭结果并拿到返回值dialogRef.afterClosed().subscribe(result { console.log(Dialog result: ${result}); // Pizza! }); dialogRef.close(Pizza!);从源码看afterClosed()直接代理了底层 CDKDialogRef.closed流dialog-ref.ts而beforeClosed()在退出动画开始时提前发出结果close()内部还支持通过closePredicate见下文配置表拦截关闭行为dialog-ref.ts。在对话框组件内部关闭自身通过MatDialog打开的组件可以注入MatDialogRef从而在自己内部关闭所在对话框。关闭时可传入可选结果值该值会作为afterClosedObservable 的结果转发给调用方import {inject} from angular/core; Component({/* ... */}) export class YourDialog { dialogRef inject(MatDialogRef); closeDialog() { this.dialogRef.close(Pizza!); } }完整示例可参考 dialog-overview-example.ts其中对话框组件通过inject(MatDialogRefDialogOverviewExampleDialog)获得引用并在 No Thanks 按钮点击时调用dialogRef.close()。三、MatDialogConfig完整配置项速查open的第二个参数类型是MatDialogConfigD定义在 dialog-config.ts。以下是该配置类的完整字段、含义与源码默认值配置项说明源码默认值viewContainerRef对话框组件在 Angular逻辑组件树中的挂载位置影响可注入依赖与变更检测顺序不影响实际渲染位置undefinedinjector用于实例化对话框组件的注入器优先级高于viewContainerRef间接提供的注入器undefinedid对话框 ID省略时自动生成唯一值自动生成roleARIA 角色可取dialog/alertdialogdialogpanelClass自定义 overlay 面板 CSS 类hasBackdrop是否显示背景遮罩truebackdropClass自定义遮罩 CSS 类disableClose是否禁止通过 Esc 键或点击遮罩关闭falseclosePredicate用于判定对话框是否允许关闭的函数返回false则拒绝关闭undefinedwidth/height对话框宽高minWidth/minHeight最小宽高传入数字时按像素处理undefinedmaxWidth/maxHeight最大宽高传入数字时按像素处理undefinedposition位置覆盖top/bottom/left/right见 DialogPositionundefineddata注入到子组件的数据nulldirection内容布局方向LTR/RTLundefinedariaDescribedBy描述对话框的元素的 IDnullariaLabelledBy为对话框提供标签的元素的 IDnullariaLabel对话框的 ARIA 标签nullariaModal是否设置aria-modal属性默认关闭因其可能干扰mat-select等基于 overlay 的组件且对话框本会将外部内容标记为aria-hiddenfalseautoFocus打开时焦点放置策略见下文「焦点管理」first-tabbablerestoreFocus关闭后焦点恢复行为配置truedelayFocusTrap是否等开启动画结束后再开始焦点陷阱truescrollStrategy对话框的滚动策略由MAT_DIALOG_SCROLL_STRATEGY提供closeOnNavigation用户前进/后退历史记录时是否关闭通常不包含点击链接trueenterAnimationDuration进入动画时长ms未设置时取容器常量 150msexitAnimationDuration退出动画时长ms未设置时取容器常量 75msbindings应用到对话框内组件的绑定对模板对话框无效undefined其中默认滚动策略由MAT_DIALOG_SCROLL_STRATEGY令牌在根级提供使用 CDK 的createBlockScrollStrategydialog.ts即对话框打开时锁定页面背景滚动。四、全局默认配置MAT_DIALOG_DEFAULT_OPTIONS如果希望为所有对话框指定统一默认项可以在应用配置中为MAT_DIALOG_DEFAULT_OPTIONS提供一个MatDialogConfig实例bootstrapApplication(MyApp, { providers: [ {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}} ] });关键陷阱默认配置是「整体替换」而非「合并」注意为MAT_DIALOG_DEFAULT_OPTIONS提供的值会完全替换内置默认值而不是与内置默认值合并。例如只提供{disableClose: true}则其他默认值如hasBackdrop都会变成undefined。如果只想覆盖个别属性请先展开默认值{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {...new MatDialogConfig(), disableClose: true}}调用dialog.open()时传入的配置会合并到这些默认值之上因此每次打开的独立配置始终拥有更高优先级。从源码验证MatDialog在构造函数中通过injectMatDialogConfig(MAT_DIALOG_DEFAULT_OPTIONS, {optional: true})获取默认配置dialog.ts令牌本身定义在同文件 dialog.ts。五、与对话框共享数据MAT_DIALOG_DATA使用data选项向对话框组件传入信息let dialogRef dialog.open(YourDialog, { data: { name: austin }, });在对话框组件中通过MAT_DIALOG_DATA注入令牌读取数据import {Component, inject} from angular/core; import {MAT_DIALOG_DATA} from angular/material/dialog; Component({ selector: your-dialog, template: passed in {{ data.name }}, }) export class YourDialog { data inject{name: string}(MAT_DIALOG_DATA); }MAT_DIALOG_DATA令牌定义于 dialog.ts其本质是一个InjectionTokenany对话框容器在实例化子组件时将其与data配置绑定。完整示例见 dialog-overview-example.tsexport class DialogOverviewExampleDialog { readonly dialogRef inject(MatDialogRefDialogOverviewExampleDialog); readonly data injectDialogData(MAT_DIALOG_DATA); readonly animal model(this.data.animal); }模板对话框中的数据隐式可用如果对话框是用TemplateRef打开的模板对话框数据会在模板中隐式可用无需注入令牌ng-template let-data Hello, {{data.name}} /ng-template六、组织对话框内容结构指令为方便构建对话框布局Angular Material 提供了一组结构指令名称说明mat-dialog-title[Attr] 对话框标题应用于标题元素如h1、h2mat-dialog-content对话框的主要可滚动内容区域mat-dialog-actions底部操作按钮容器可通过align属性取值start/center/end控制按钮对齐mat-dialog-close[Attr] 添加在button上使按钮以绑定值作为结果关闭对话框例如h2 mat-dialog-titleDelete all elements?/h2 mat-dialog-contentThis will delete all elements that are currently on this page and cannot be undone./mat-dialog-content mat-dialog-actions button matButton mat-dialog-closeCancel/button !-- mat-dialog-close 指令可选地接受一个值作为对话框的关闭结果 -- button matButton [mat-dialog-close]trueDelete/button /mat-dialog-actions这些指令的实现位于 dialog-content-directives.tsMatDialogClose点击时调用_closeDialogVia关闭对话框并携带结果默认typebutton以防止意外触发表单提交dialog-content-directives.ts它还支持aria-label输入且点击时根据鼠标/键盘来源记录交互类型MatDialogTitle会将自己的id注册到容器的aria-labelledby队列实现标题与对话框的 ARIA 关联dialog-content-directives.tsMatDialogContent通过hostDirectives: [CdkScrollable]获得 CDK 滚动能力dialog-content-directives.tsMatDialogActionsalign输入映射为mat-mdc-dialog-actions-align-start/center/end样式类dialog-content-directives.ts。配合示例模板 dialog-overview-example-dialog.html一个完整可运行的对话框如下h2 mat-dialog-titleHi {{data.name}}/h2 mat-dialog-content pWhats your favorite animal?/p mat-form-field mat-labelFavorite Animal/mat-label input matInput [(ngModel)]animal / /mat-form-field /mat-dialog-content mat-dialog-actions button matButton (click)onNoClick()No Thanks/button button matButton [mat-dialog-close]animal() cdkFocusInitialOk/button /mat-dialog-actions七、对话框打开后的初始焦点对话框打开后会自动聚焦第一个可 tab 的元素。你可以通过tabindex属性控制哪些元素会成为 Tab 停靠点button matButton tabindex-1Not Tabbable/button若要显式指定某个元素获得初始焦点可使用 CDK 的cdkFocusInitial如上面示例中的 Ok 按钮。八、控制对话框动画通过enterAnimationDuration与exitAnimationDuration配置项可分别控制进入和退出动画的时长将二者都设为0ms可以完全禁用动画dialog.open(MyComponent, { enterAnimationDuration: 250ms, exitAnimationDuration: 100ms, });从容器源码 dialog-container.ts 可以看到未显式配置时的默认常量分别为进入动画OPEN_ANIMATION_DURATION 150ms、退出动画CLOSE_ANIMATION_DURATION 75ms。容器通过_startExitAnimation()/ 动画状态事件opened/closed与MatDialogRef联动——关闭操作会等待退出动画结束才真正销毁 overlay并带有超时兜底逻辑dialog-ref.ts。另外当应用检测到动画被全局禁用如prefers-reduced-motion时容器会加上_mat-animation-noopable类直接跳过动画。九、无障碍Accessibility默认 ARIA 模式MatDialog创建的是实现 ARIAroledialog模式的模态对话框。可以通过MatDialogConfig将角色改为alertdialog常用于需要立即响应的警告场景dialog.open(ConfirmDialog, {role: alertdialog});应当通过ariaLabel或ariaLabelledBy为对话框根元素提供可访问标签并可通过ariaDescribedBy指定描述元素的 IDdialog.open(MyDialog, { ariaLabel: 用户信息编辑, ariaDescribedBy: dialog-description, });从 dialog-container.ts 的宿主绑定可见这些 ARIA 属性role、aria-labelledby、aria-label、aria-describedby、aria-modal都会直接反映到mat-dialog-container根元素上其中aria-labelledby优先使用标题指令自动注册的 ID。键盘交互默认情况下Esc 键可以关闭MatDialog。虽然可以通过disableClose属性关闭这一行为但这样做会破坏 ARIAroledialog模式的预期交互模式除非有充分理由否则不建议。底层实现位于 dialog-ref.tsMatDialogRef合并订阅了backdropClick()与keydownEvents()当按下 Esc且未按下修饰键、未设置disableClose或点击遮罩时触发关闭并根据事件来源记录keyboard/mouse交互类型。焦点管理打开时MatDialog会将浏览器焦点困在根roledialog元素内即焦点陷阱且默认等开启动画结束才开始对应delayFocusTrap配置。默认聚焦第一个可 tab 的元素可通过autoFocus配置自定义支持以下取值值行为first-tabbable聚焦第一个可 tab 元素默认设置first-header聚焦第一个标题元素roleheading、h1~h6dialog聚焦根roledialog元素任意 CSS 选择器聚焦匹配该选择器的第一个元素默认设置在大多数应用中是最佳行为但某些特殊场景可能更适合其他选项。务必实际测试你的应用确认哪种行为对用户最友好。从源码看autoFocus的类型AutoFocusTarget dialog | first-tabbable | first-headingdialog-config.ts同时保留布尔值兼容旧版本dialog-config.ts。焦点恢复关闭时MatDialog会把焦点恢复到对话框打开前持有焦点的元素。但如果那个元素已经不存在于 DOM 中就需要额外处理把焦点放回对用户工作流有意义的位置。一个典型场景是从菜单中打开对话框点击菜单项后菜单关闭原来聚焦的菜单项已被移出 DOM焦点恢复便会失效。此时可以借助MatDialogRef的afterClosed()Observable 自行处理示例见 dialog-from-menu 示例关注其中的focus-restoration区域大致思路是在订阅关闭回调中把焦点手动交还给某个依然存在的、语义合适的元素如触发按钮或菜单面板的替代元素。十、源码文件导航如果你想深入阅读实现本仓库中与 Dialog 相关的关键文件如下官方文档src/material/dialog/dialog.md服务与注入令牌src/material/dialog/dialog.ts配置类src/material/dialog/dialog-config.ts引用句柄src/material/dialog/dialog-ref.ts容器组件src/material/dialog/dialog-container.ts 与 dialog-container.html内容结构指令src/material/dialog/dialog-content-directives.ts模块声明src/material/dialog/dialog-module.ts测试用例src/material/dialog/dialog.spec.ts含 Zone 相关测试 dialog.zone.spec.ts可运行示例入口见 src/components-examples/material/dialog/index.ts完整示例包括 dialog-overview、dialog-data、dialog-content、dialog-animations 与 dialog-from-menu。十一、小结MatDialog以极简的 API 封装了模态对话框的全部复杂度open()一行即可打开并得到MatDialogRef句柄配置对象MatDialogConfig覆盖尺寸、位置、遮罩、滚动策略、动画与无障碍属性MAT_DIALOG_DATA与MAT_DIALOG_DEFAULT_OPTIONS分别解决传值与全局默认化需求而内容结构指令让对话框模板保持清晰一致的语义。从本仓库源码可以看到其无障碍能力ARIA 角色、焦点陷阱、焦点恢复并非装饰而是内建于容器与引用实现中的一等公民特性。在实际项目中建议结合MatDialogHarness见 testing 目录编写可测试、可访问的对话框代码。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Angular Material Dialog 完全指南：MatDialog 的打开、传值、焦点管理与无障碍实践
Angular Material Dialog 完全指南MatDialog 的打开、传值、焦点管理与无障碍实践【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本指南以 Angular Material 官方文档中 Dialog 使用说明 为骨架结合本仓库 Dialog 模块源码 与 组件示例系统讲解MatDialog服务的完整使用方式从最基本的打开与关闭、配置项的逐项含义、全局默认值、数据共享到焦点管理与 ARIA 无障碍模式。读完本文你将能够独立实现一个符合 Material Design 规范、可访问、可复用的模态对话框并理解其底层实现原理。一、MatDialog 是什么MatDialog是 Angular Material 提供的模态对话框服务基于 CDK 的Dialog与Overlay机制构建。它负责打开带有 Material Design 样式和过渡动画的模态窗口并将对话框内容渲染在独立的 overlay 层中。服务本身定义在 dialog.tsService() export class MatDialog implements OnDestroy { // ... }使用MatDialog前需要将其注入到组件中如示例 dialog-overview-example.tsreadonly dialog inject(MatDialog);同时在组件或应用级别引入必要的模块/导入示例中直接以 standalone 方式导入指令与按钮模块import {MatButtonModule} from angular/material/button; import { MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle, } from angular/material/dialog;二、打开对话框open 方法与 MatDialogRef对话框通过调用MatDialog.open打开第一个参数传入要加载的组件第二个参数是可选配置对象let dialogRef dialog.open(UserProfileComponent, { height: 400px, width: 600px, });open方法有两个重载分别支持组件对话框与模板对话框见 dialog.ts 的方法签名。无论哪种形式open都会返回一个MatDialogRefT, R实例作为已打开对话框的句柄。MatDialogRef 提供的核心能力MatDialogRef定义在 dialog-ref.ts其职责包括关闭对话框调用close(result?)可携带可选的关闭结果订阅生命周期通知afterClosed()、beforeClosed()、afterOpened()返回的 Observable 在对话框关闭/打开时发出事件且所有通知 Observable 在对话框关闭后都会 complete监听交互事件backdropClick()、keydownEvents()动态更新外观updatePosition()、updateSize()、addPanelClass()/removePanelClass()查询状态getState()返回MatDialogState枚举OPEN/CLOSING/CLOSED。典型用法是订阅关闭结果并拿到返回值dialogRef.afterClosed().subscribe(result { console.log(Dialog result: ${result}); // Pizza! }); dialogRef.close(Pizza!);从源码看afterClosed()直接代理了底层 CDKDialogRef.closed流dialog-ref.ts而beforeClosed()在退出动画开始时提前发出结果close()内部还支持通过closePredicate见下文配置表拦截关闭行为dialog-ref.ts。在对话框组件内部关闭自身通过MatDialog打开的组件可以注入MatDialogRef从而在自己内部关闭所在对话框。关闭时可传入可选结果值该值会作为afterClosedObservable 的结果转发给调用方import {inject} from angular/core; Component({/* ... */}) export class YourDialog { dialogRef inject(MatDialogRef); closeDialog() { this.dialogRef.close(Pizza!); } }完整示例可参考 dialog-overview-example.ts其中对话框组件通过inject(MatDialogRefDialogOverviewExampleDialog)获得引用并在 No Thanks 按钮点击时调用dialogRef.close()。三、MatDialogConfig完整配置项速查open的第二个参数类型是MatDialogConfigD定义在 dialog-config.ts。以下是该配置类的完整字段、含义与源码默认值配置项说明源码默认值viewContainerRef对话框组件在 Angular逻辑组件树中的挂载位置影响可注入依赖与变更检测顺序不影响实际渲染位置undefinedinjector用于实例化对话框组件的注入器优先级高于viewContainerRef间接提供的注入器undefinedid对话框 ID省略时自动生成唯一值自动生成roleARIA 角色可取dialog/alertdialogdialogpanelClass自定义 overlay 面板 CSS 类hasBackdrop是否显示背景遮罩truebackdropClass自定义遮罩 CSS 类disableClose是否禁止通过 Esc 键或点击遮罩关闭falseclosePredicate用于判定对话框是否允许关闭的函数返回false则拒绝关闭undefinedwidth/height对话框宽高minWidth/minHeight最小宽高传入数字时按像素处理undefinedmaxWidth/maxHeight最大宽高传入数字时按像素处理undefinedposition位置覆盖top/bottom/left/right见 DialogPositionundefineddata注入到子组件的数据nulldirection内容布局方向LTR/RTLundefinedariaDescribedBy描述对话框的元素的 IDnullariaLabelledBy为对话框提供标签的元素的 IDnullariaLabel对话框的 ARIA 标签nullariaModal是否设置aria-modal属性默认关闭因其可能干扰mat-select等基于 overlay 的组件且对话框本会将外部内容标记为aria-hiddenfalseautoFocus打开时焦点放置策略见下文「焦点管理」first-tabbablerestoreFocus关闭后焦点恢复行为配置truedelayFocusTrap是否等开启动画结束后再开始焦点陷阱truescrollStrategy对话框的滚动策略由MAT_DIALOG_SCROLL_STRATEGY提供closeOnNavigation用户前进/后退历史记录时是否关闭通常不包含点击链接trueenterAnimationDuration进入动画时长ms未设置时取容器常量 150msexitAnimationDuration退出动画时长ms未设置时取容器常量 75msbindings应用到对话框内组件的绑定对模板对话框无效undefined其中默认滚动策略由MAT_DIALOG_SCROLL_STRATEGY令牌在根级提供使用 CDK 的createBlockScrollStrategydialog.ts即对话框打开时锁定页面背景滚动。四、全局默认配置MAT_DIALOG_DEFAULT_OPTIONS如果希望为所有对话框指定统一默认项可以在应用配置中为MAT_DIALOG_DEFAULT_OPTIONS提供一个MatDialogConfig实例bootstrapApplication(MyApp, { providers: [ {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}} ] });关键陷阱默认配置是「整体替换」而非「合并」注意为MAT_DIALOG_DEFAULT_OPTIONS提供的值会完全替换内置默认值而不是与内置默认值合并。例如只提供{disableClose: true}则其他默认值如hasBackdrop都会变成undefined。如果只想覆盖个别属性请先展开默认值{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {...new MatDialogConfig(), disableClose: true}}调用dialog.open()时传入的配置会合并到这些默认值之上因此每次打开的独立配置始终拥有更高优先级。从源码验证MatDialog在构造函数中通过injectMatDialogConfig(MAT_DIALOG_DEFAULT_OPTIONS, {optional: true})获取默认配置dialog.ts令牌本身定义在同文件 dialog.ts。五、与对话框共享数据MAT_DIALOG_DATA使用data选项向对话框组件传入信息let dialogRef dialog.open(YourDialog, { data: { name: austin }, });在对话框组件中通过MAT_DIALOG_DATA注入令牌读取数据import {Component, inject} from angular/core; import {MAT_DIALOG_DATA} from angular/material/dialog; Component({ selector: your-dialog, template: passed in {{ data.name }}, }) export class YourDialog { data inject{name: string}(MAT_DIALOG_DATA); }MAT_DIALOG_DATA令牌定义于 dialog.ts其本质是一个InjectionTokenany对话框容器在实例化子组件时将其与data配置绑定。完整示例见 dialog-overview-example.tsexport class DialogOverviewExampleDialog { readonly dialogRef inject(MatDialogRefDialogOverviewExampleDialog); readonly data injectDialogData(MAT_DIALOG_DATA); readonly animal model(this.data.animal); }模板对话框中的数据隐式可用如果对话框是用TemplateRef打开的模板对话框数据会在模板中隐式可用无需注入令牌ng-template let-data Hello, {{data.name}} /ng-template六、组织对话框内容结构指令为方便构建对话框布局Angular Material 提供了一组结构指令名称说明mat-dialog-title[Attr] 对话框标题应用于标题元素如h1、h2mat-dialog-content对话框的主要可滚动内容区域mat-dialog-actions底部操作按钮容器可通过align属性取值start/center/end控制按钮对齐mat-dialog-close[Attr] 添加在button上使按钮以绑定值作为结果关闭对话框例如h2 mat-dialog-titleDelete all elements?/h2 mat-dialog-contentThis will delete all elements that are currently on this page and cannot be undone./mat-dialog-content mat-dialog-actions button matButton mat-dialog-closeCancel/button !-- mat-dialog-close 指令可选地接受一个值作为对话框的关闭结果 -- button matButton [mat-dialog-close]trueDelete/button /mat-dialog-actions这些指令的实现位于 dialog-content-directives.tsMatDialogClose点击时调用_closeDialogVia关闭对话框并携带结果默认typebutton以防止意外触发表单提交dialog-content-directives.ts它还支持aria-label输入且点击时根据鼠标/键盘来源记录交互类型MatDialogTitle会将自己的id注册到容器的aria-labelledby队列实现标题与对话框的 ARIA 关联dialog-content-directives.tsMatDialogContent通过hostDirectives: [CdkScrollable]获得 CDK 滚动能力dialog-content-directives.tsMatDialogActionsalign输入映射为mat-mdc-dialog-actions-align-start/center/end样式类dialog-content-directives.ts。配合示例模板 dialog-overview-example-dialog.html一个完整可运行的对话框如下h2 mat-dialog-titleHi {{data.name}}/h2 mat-dialog-content pWhats your favorite animal?/p mat-form-field mat-labelFavorite Animal/mat-label input matInput [(ngModel)]animal / /mat-form-field /mat-dialog-content mat-dialog-actions button matButton (click)onNoClick()No Thanks/button button matButton [mat-dialog-close]animal() cdkFocusInitialOk/button /mat-dialog-actions七、对话框打开后的初始焦点对话框打开后会自动聚焦第一个可 tab 的元素。你可以通过tabindex属性控制哪些元素会成为 Tab 停靠点button matButton tabindex-1Not Tabbable/button若要显式指定某个元素获得初始焦点可使用 CDK 的cdkFocusInitial如上面示例中的 Ok 按钮。八、控制对话框动画通过enterAnimationDuration与exitAnimationDuration配置项可分别控制进入和退出动画的时长将二者都设为0ms可以完全禁用动画dialog.open(MyComponent, { enterAnimationDuration: 250ms, exitAnimationDuration: 100ms, });从容器源码 dialog-container.ts 可以看到未显式配置时的默认常量分别为进入动画OPEN_ANIMATION_DURATION 150ms、退出动画CLOSE_ANIMATION_DURATION 75ms。容器通过_startExitAnimation()/ 动画状态事件opened/closed与MatDialogRef联动——关闭操作会等待退出动画结束才真正销毁 overlay并带有超时兜底逻辑dialog-ref.ts。另外当应用检测到动画被全局禁用如prefers-reduced-motion时容器会加上_mat-animation-noopable类直接跳过动画。九、无障碍Accessibility默认 ARIA 模式MatDialog创建的是实现 ARIAroledialog模式的模态对话框。可以通过MatDialogConfig将角色改为alertdialog常用于需要立即响应的警告场景dialog.open(ConfirmDialog, {role: alertdialog});应当通过ariaLabel或ariaLabelledBy为对话框根元素提供可访问标签并可通过ariaDescribedBy指定描述元素的 IDdialog.open(MyDialog, { ariaLabel: 用户信息编辑, ariaDescribedBy: dialog-description, });从 dialog-container.ts 的宿主绑定可见这些 ARIA 属性role、aria-labelledby、aria-label、aria-describedby、aria-modal都会直接反映到mat-dialog-container根元素上其中aria-labelledby优先使用标题指令自动注册的 ID。键盘交互默认情况下Esc 键可以关闭MatDialog。虽然可以通过disableClose属性关闭这一行为但这样做会破坏 ARIAroledialog模式的预期交互模式除非有充分理由否则不建议。底层实现位于 dialog-ref.tsMatDialogRef合并订阅了backdropClick()与keydownEvents()当按下 Esc且未按下修饰键、未设置disableClose或点击遮罩时触发关闭并根据事件来源记录keyboard/mouse交互类型。焦点管理打开时MatDialog会将浏览器焦点困在根roledialog元素内即焦点陷阱且默认等开启动画结束才开始对应delayFocusTrap配置。默认聚焦第一个可 tab 的元素可通过autoFocus配置自定义支持以下取值值行为first-tabbable聚焦第一个可 tab 元素默认设置first-header聚焦第一个标题元素roleheading、h1~h6dialog聚焦根roledialog元素任意 CSS 选择器聚焦匹配该选择器的第一个元素默认设置在大多数应用中是最佳行为但某些特殊场景可能更适合其他选项。务必实际测试你的应用确认哪种行为对用户最友好。从源码看autoFocus的类型AutoFocusTarget dialog | first-tabbable | first-headingdialog-config.ts同时保留布尔值兼容旧版本dialog-config.ts。焦点恢复关闭时MatDialog会把焦点恢复到对话框打开前持有焦点的元素。但如果那个元素已经不存在于 DOM 中就需要额外处理把焦点放回对用户工作流有意义的位置。一个典型场景是从菜单中打开对话框点击菜单项后菜单关闭原来聚焦的菜单项已被移出 DOM焦点恢复便会失效。此时可以借助MatDialogRef的afterClosed()Observable 自行处理示例见 dialog-from-menu 示例关注其中的focus-restoration区域大致思路是在订阅关闭回调中把焦点手动交还给某个依然存在的、语义合适的元素如触发按钮或菜单面板的替代元素。十、源码文件导航如果你想深入阅读实现本仓库中与 Dialog 相关的关键文件如下官方文档src/material/dialog/dialog.md服务与注入令牌src/material/dialog/dialog.ts配置类src/material/dialog/dialog-config.ts引用句柄src/material/dialog/dialog-ref.ts容器组件src/material/dialog/dialog-container.ts 与 dialog-container.html内容结构指令src/material/dialog/dialog-content-directives.ts模块声明src/material/dialog/dialog-module.ts测试用例src/material/dialog/dialog.spec.ts含 Zone 相关测试 dialog.zone.spec.ts可运行示例入口见 src/components-examples/material/dialog/index.ts完整示例包括 dialog-overview、dialog-data、dialog-content、dialog-animations 与 dialog-from-menu。十一、小结MatDialog以极简的 API 封装了模态对话框的全部复杂度open()一行即可打开并得到MatDialogRef句柄配置对象MatDialogConfig覆盖尺寸、位置、遮罩、滚动策略、动画与无障碍属性MAT_DIALOG_DATA与MAT_DIALOG_DEFAULT_OPTIONS分别解决传值与全局默认化需求而内容结构指令让对话框模板保持清晰一致的语义。从本仓库源码可以看到其无障碍能力ARIA 角色、焦点陷阱、焦点恢复并非装饰而是内建于容器与引用实现中的一等公民特性。在实际项目中建议结合MatDialogHarness见 testing 目录编写可测试、可访问的对话框代码。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
