无需回传值时如何使用dialogRef.afterClosed()实现关闭弹窗后刷新数据

核心结论 #

• 你不能完全去掉subscribe调用：dialogRef.afterClosed()返回的是RxJS Observable类型的异步对象，只有完成订阅操作，才会在弹窗关闭的事件触发时，执行你指定的后续逻辑。
• 你可以直接省略不需要的result参数，不影响逻辑执行，不需要处理这个默认返回的undefined值。

优化后可直接使用的代码 #

openDialog(employeeId: string): void {
  const dialogRef = this.dialog.open(ExampleDialogComponent, {
      width: '250px',
      data: employeeId,
  });
    
  // 直接移除不需要的result参数即可
  dialogRef.afterClosed().subscribe(() => {
     console.log('The dialog was closed');
     this.dataSaved = true;
     this.employeeIdUpdate = null;
     this.employeeForm.reset();
     this.loadAllEmployees();
  });
}

补充说明 #

你当前拿到result为undefined是正常现象：只有在弹窗组件内部调用this.dialogRef.close()方法时主动传入返回参数，主组件的订阅回调才能拿到对应的值，未主动传值时默认就返回undefined，完全不影响现有逻辑运行。

如果需要做更稳妥的内存管理，因为弹窗关闭事件只会触发一次，可以加上take(1)操作符自动结束订阅，避免潜在的内存泄漏：

// 顶部先导入take操作符
import { take } from 'rxjs';

// 订阅时添加take(1)即可
dialogRef.afterClosed().pipe(take(1)).subscribe(() => {
  // 原有逻辑不变
});

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