无法在 _closeDialogViadialog.mjs 处设置 null 属性（设置“_closeInteractionType”）

Question

在此输入图像描述

将应用程序的材料迁移到 15 版本后，matdialog（内置关闭按钮）无法工作并抛出以下错误：

• `错误类型错误：无法设置 null 属性（设置 '_closeInteractionType'）
• 在 _closeDialogVia (dialog.mjs:476:30)
• 在 MatLegacyDialogClose._onButtonClick （legacy-dialog.mjs:287:24）
• 在 MatLegacyDialogClose_click_HostBindingHandler (legacy-dialog.mjs:291:107)
• 在executeListenerWithErrorHandling（core.mjs：14037：16）
• 在wrapListenerIn_markDirtyAndPreventDefault（core.mjs：14070：22）
• 在 HTMLButtonElement 处。（平台浏览器.mjs：455：38）
• 在 _ZoneDelegate.invokeTask (zone.js:443:35)
• 在 core.mjs:23946:55
• 在 AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23946:36)
• 在 _ZoneDelegate.invokeTask (zone.js:442:64)
• `

附图。

执行命令后：

• ng generate @angular/material:mdc-migration

***Parent.compoment.ts***

- import { MatDialog, MatDialogRef } from '@angular/material/dialog';
- public dialog: MatDialog
- 
- const dialogRef = this.dialog.open(EmailOptionComponent, {
- role: 'dialog',
- disableClose: true,
- panelClass: ['fis-style', 'panel-export-width', 'margin_35px']
-     });
- dialogRef.componentInstance.emailInputOptions = this.emailOptionsData;
- dialogRef.componentInstance.pageName = 'GAIN_LOSS_PAGE';
- dialogRef.afterClosed().subscribe(result => {
- if (result) {
- this.EmailSend();
-       }
-     });
- 

***email-options.component.ts***

- 
- `constructor(public dialogRef: MatDialogRef<EmailOptionComponent>, private emailSandbox: EmailSandbox, private store: Store<any>) { }
- 
- 
-  confirmDialog = () => {
- this.dialogRef.close(true);
-     }``

上面的代码不起作用。它应该可以正常工作而不会引发任何错误

Answer 1

我也遇到了这个问题，你是对的：原因是迁移到新的mat-mdcAPI。

MatDialog当您使用MatLegacyDialog close()方法或指令关闭MatLegacyDialogClose而不是使用新的mdcAPI 时，会引发此错误。

当您使用 API的方法或指令而不是使用API 来使用MatLegacyDialog并尝试关闭它时，它也会以相反的方式发生。close()MatDialogMatDialogCloseLegacy

底线是 - 对于与其相关的所有不同操作，继续使用相同版本的 mat-dialog（旧版本或新版本）。

我很好奇它是否解决了你的问题。请告诉我！！

Answer 2

如果没有格式，阅读代码是非常困难的，有一个选项可以正确发布它。似乎没有打开的对话框可以关闭。您可以像这样触发从子级到父级的关闭事件：

孩子 ts:

import { EventEmitter, Output } from '@angular/core';
    export class MyChildComponent {
    @Output() onCloseDialog: EventEmitter<boolean> = new EventEmitter();
      
    // ...
}

子 HTML：

<button (click)="onCloseDialog.emit(true)">Close dialog</button>

父级 HTML：

<app-my-child (onCloseDialog)="closeDialog($event)"></app-my-child>

父级 ts：

closeDialog($event: boolean) {
  if ($event) {
    this.dialogRef.close();
  }
}