Angular13+Angular Material13中MatDialog关闭传值父组件接收为undefined

问题场景 #

基于Angular 13、Angular Material 13开发时，MatDialog弹窗关闭后向父组件传递数据，父组件订阅回调中接收到的值始终为undefined，无法获取子组件调用close()方法传入的{data: false}参数。

错误实现代码 #

父组件逻辑 #

constructor(private dialog: MatDialog) {}

openCreateMetric() {
  this.dialog.open(MetricCreateComponent, {
    width: '50%',
    disableClose: true,
    autoFocus: 'dialog',
  });
  this.dialog.afterAllClosed.subscribe((closeTrigger) => {
    console.log(closeTrigger) // 打印结果始终为undefined
    this.loadFlag.next(Math.random())
  });
}

子组件逻辑 #

export class MetricCreateComponent extends AppComponentBase implements OnInit, AfterViewInit{
  constructor(
    private dialogRef: MatDialogRef<MetricCreateComponent>,
    @Inject(MAT_DIALOG_DATA) public input: MetricDetailsDto
  ) { }

  onDialogCloseClick(): void {
    this.dialogRef.close({data: false})
  }
}

弹窗模板 #

<button mat-icon-button tabindex="-1" (click)="onDialogCloseClick()">
  <i class="fal fa-times"></i>
</button>

问题根因 #

API使用错误：

• MatDialog服务的afterAllClosed是全局级事件，仅在页面上所有弹窗全部关闭时触发，作用是发送全局关闭通知，回调本身不接收任何单个弹窗传入的关闭参数，返回值类型为void，因此打印结果永远是undefined。
• 单个弹窗的关闭传值，只会抛给该弹窗对应的MatDialogRef实例，不会抛给全局服务的监听事件。

修复方案 #

保存dialog.open()返回的当前弹窗MatDialogRef实例，订阅该实例上的afterClosed()事件，即可正常拿到子组件传入的关闭参数。
修复后的父组件代码：

constructor(private dialog: MatDialog) {}

openCreateMetric() {
  // 存储当前弹窗的引用实例
  const currentDialogRef = this.dialog.open(MetricCreateComponent, {
    width: '50%',
    disableClose: true,
    autoFocus: 'dialog',
  });
  // 订阅当前弹窗实例的关闭事件
  currentDialogRef.afterClosed().subscribe((closeResult) => {
    console.log(closeResult) // 正常输出 {data: false}
    this.loadFlag.next(Math.random())
  });
}

注意：afterAllClosed仅适合需要感知全局所有弹窗都已关闭的场景，不要用它获取单个弹窗的返回数据。

内容的提问来源于stack exchange，提问作者San Jaisy