Angular 9.1.15中MatDialog.afterClosed()返回undefined问题

我在项目中多次使用MatDialog，两个模态弹窗调用方式相似，但一个能正常返回数据，另一个调用.afterClosed().subscribe()时返回undefined。相关代码如下：

stocks.component.ts（库存记录管理主组件）

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

import { NewModalComponent } from '../modal/new/new.component';
import { AddModalComponent } from '../modal/add/add.component';
...

export class StocksComponent implements OnInit, OnDestroy {

  constructor(
    private dialog: MatDialog,
    ...
  ) {}

  ...

  click(what) {
    switch (what) {
      case 'new':
        this.dialog.open(NewModalComponent, {
          width:      '440px',
          height:     '600px',
          autoFocus:  false,
        }).afterClosed().subscribe(
          (data) => {
console.log('modal-new > data :: ',data); // 返回传入的对象
          }
        );
      break;

      case 'add':
        this.dialog.open(AddModalComponent, {
          width:      '95%',
          height:     '85%',
          autoFocus:  false,
          data: {
            ...
          },
        }).afterClosed().subscribe(
          (data) => {
console.log('modal-add > data :: ',data); // 返回undefined
          }
        );
      break;
    }
  }
}

new.component.ts（选择新库存类型的简单弹窗）

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
...

export class NewModalComponent implements OnInit, OnDestroy {

  constructor(
    private dialogRef: MatDialogRef<NewModalComponent>,
    ...
  ) {}

  ...

  click(what, data) {
    switch (what) {
      case 'newtype':
        this.dialogRef.close(data); // data为一个对象
      break;
    }
  }
}

add.component.ts（添加产品到新库存的弹窗）

import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
...

export class AddModalComponent implements OnInit, OnDestroy {

  constructor(
    @Inject(MAT_DIALOG_DATA) public data,
    private dialogRef: MatDialogRef<AddModalComponent>,
  ) {}

  ...

  click(what) {
    switch (what) {
      case 'close':
        this.dialogRef.close(this.products); // this.products为一个对象
      break;
    }
  }

}

排查与解决方法 #

• 确认this.products的实际值：在调用dialogRef.close()前添加日志，检查this.products是否真的是预期的对象，而非undefined：

  case 'close':
    console.log('待返回的products:', this.products);
    this.dialogRef.close(this.products);
  break;
  

• 防止弹窗被意外关闭：如果用户点击弹窗外部或按ESC键关闭，afterClosed()会返回undefined。可以在打开弹窗时设置disableClose: true，强制只能通过代码触发关闭：

  this.dialog.open(AddModalComponent, {
    width:      '95%',
    height:     '85%',
    autoFocus:  false,
    disableClose: true, // 禁用外部点击和ESC关闭
    data: {
      ...
    },
  })
  

• 检查MatDialogRef的注入顺序：虽然Angular注入不严格依赖顺序，但偶尔会出现意外，调整构造函数中注入的顺序，先注入MatDialogRef再注入MAT_DIALOG_DATA：

  constructor(
    private dialogRef: MatDialogRef<AddModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data,
  ) {}
  

• 排查是否有其他关闭弹窗的逻辑：检查AddModalComponent中是否存在其他调用dialogRef.close()的地方，且未传入参数，这会导致返回undefined。

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