Angular 12中mat-dialog关闭后如何调用ListScheduleComponent的getAllEvents方法

Angular Material Dialog 提供了开箱即用的关闭回调机制，你可以通过以下步骤实现需求：

步骤1：调整 CreateScheduleComponent 逻辑 #

首先确保该组件已注入MatDialogRef实例，提交成功后关闭弹窗时传入成功状态标识：

// 先在构造函数注入MatDialogRef
constructor(
  private dialogRef: MatDialogRef<CreateScheduleComponent>,
  // 你的其他注入项，比如calendarService
) {}

onSubmit(): void {
    this.calendarService
      .createNewEvent(this.eventForm.value)
      .subscribe((response) => {
        if (response.statuscode===201) {
          // 关闭弹窗同时传入true，表示提交成功
          this.dialogRef.close(true);
        } else {
          console.log(response.message);
          // 提交失败可以传false或者不传参数
          this.dialogRef.close(false);
        }
      });
  }

步骤2：调整 ListScheduleComponent 弹窗调用逻辑 #

在打开弹窗后订阅afterClosed事件，根据返回的状态标识判断是否需要刷新事件列表：

handleDateSelect(selectInfo: DateSelectArg) {
  this.fileNameDialogRef = this.dialog.open(CreateScheduleComponent, {
    data: {
      startdate: this.datePipe.transform(selectInfo.start, 'yyyy-M-dd'),
      enddate: this.datePipe.transform(selectInfo.end, 'yyyy-M-dd'),
    },
  });

  // 新增：监听弹窗关闭回调
  this.fileNameDialogRef.afterClosed().subscribe((isSubmitSuccess: boolean) => {
    // 如果提交成功，调用刷新方法
    if (isSubmitSuccess) {
      this.getAllEvents();
    }
  })
}

getAllEvents(){
  //Events are loaded and displayed in the calendar
}

备选方案：公共服务事件通知（适合多组件监听场景） #

如果你的getAllEvents方法需要在多个地方触发，也可以通过公共服务搭配RxJS Subject实现事件订阅：

• 在公共服务中定义一个Subject实例：public eventRefresh$ = new Subject<void>()
• 提交成功时调用this.commonService.eventRefresh$.next()
• 在ListScheduleComponent初始化时订阅该Subject，收到事件后调用getAllEvents

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