Angular MatDialog提交后刷新表格 取消操作不触发刷新问题

问题根因 #

MatDialog的afterClosed()事件会在弹窗以任何方式关闭时触发：包括点取消、点提交、点击遮罩层、按ESC关弹窗。现有代码没有对弹窗关闭的原因做判断，只要弹窗关闭就会执行拉取用户数据的逻辑，因此点击取消也会触发刷新。
不需要使用window.location.reload()做整页重载，这种方式体验差，直接拉取最新表格数据更新数据源即可满足需求

具体修改步骤 #

1. 修改弹窗组件的关闭逻辑，区分关闭场景 #

通过dialogRef.close()传参的方式，给父组件传递不同的关闭标识：

• 取消/手动关闭弹窗时，传false标记不需要刷新
• 新建用户接口请求成功后，传true标记需要刷新表格，再关闭弹窗

修改取消方法代码：

cancelSave(): void {
  // 取消操作传false，告知父组件无需刷新
  this.dialogRef.close(false);
}

修改新建用户方法代码，必须等接口返回成功后再关闭弹窗，避免接口报错时误关弹窗、误刷新：

newUser(model: any) {
  this.http.post<any>(url, model).subscribe({
    next: () => {
      // 新建成功后传true，告知父组件需要刷新数据，再关闭弹窗
      this.dialogRef.close(true);
    },
    error: error => {
      this.errorMessage = error.message;
      console.error('新建用户请求报错:', error);
    }
  });
}

2. 修改父表格组件的订阅逻辑，加刷新判断 #

在afterClosed()的订阅回调里，先判断弹窗返回的标识，只有明确收到需要刷新的标记时，才拉取最新用户数据更新表格：

onAddUser() {
  const dialogRef = this.dialog.open(AddUserRoleDialogComponent, {
    width: '500px',
    data: ''
  });

  dialogRef.afterClosed().subscribe(needRefresh => {
    // 仅当新建成功、收到刷新标记时才拉取最新数据
    if (needRefresh) {
      this.getUsers().subscribe((data) => {
        this.users = data;
        this.dataSource = data;
        console.log('用户列表已刷新', data);
      })
    }
  });
}

补充说明 #

• 如果需要支持点击遮罩、按ESC关闭弹窗时也不触发刷新，可以在打开弹窗的配置里加disableClose: true，禁止点击遮罩/ESC关弹窗，避免用户误操作
• 不要在发起post请求后立刻关闭弹窗，必须等待接口返回成功再执行关闭操作，否则接口报错时用户看不到提示，还会触发无效刷新
• 直接更新表格数据源的方式比整页重载性能更好、交互更流畅，是Angular Material表格场景的标准实现方式

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