Angular Material 15迁移后MatDialog内置关闭按钮报错无法使用

问题分析 #

报错TypeError: Cannot set properties of null (setting '_closeInteractionType')是由于MatLegacyDialogClose指令尝试访问已销毁的Dialog实例，或是新旧组件混合使用导致指令与DialogRef不匹配引发的。

解决方案 #

1. 统一Dialog组件版本 #

执行MDC迁移后，需确保项目中Dialog相关组件版本完全统一：

• 若切换到新MDC组件：将模板中的mat-dialog-close替换为mat-mdc-dialog-close，模块中导入MatMdcDialogModule，同时移除MatLegacyDialogModule的导入。
• 若继续使用Legacy组件：确保模块仅导入MatLegacyDialogModule，且所有Dialog相关代码（包括MatDialog、MatDialogRef的导入）都来自@angular/material/legacy-dialog路径。

2. 为DialogRef添加安全调用 #

在弹窗组件中，增加空值检查避免访问已销毁的Dialog实例：

confirmDialog = () => {
  if (this.dialogRef) {
    this.dialogRef.close(true);
  }
}

3. 简化Dialog配置项 #

打开Dialog时，移除可能干扰组件初始化的冗余配置：

const dialogRef = this.dialog.open(EmailOptionComponent, {
  disableClose: true,
  panelClass: ['fis-style', 'panel-export-width', 'margin_35px']
});

注：Angular Material 15中Dialog默认已正确设置role属性，无需手动指定。

4. 绕过内置指令，手动绑定关闭事件 #

如果内置指令问题无法快速排查，直接在按钮上绑定组件内的关闭方法替代mat-dialog-close：

<!-- 替换原mat-dialog-close按钮 -->
<button (click)="confirmDialog()">确认关闭</button>

内容的提问来源于stack exchange，提问作者Ramesh Kumar