如何在 Angular 12 中关闭 mat-dialog 后调用函数答案

【问题标题】：How to call a function after mat-dialog closed in Angular 12如何在 Angular 12 中关闭 mat-dialog 后调用函数
【发布时间】：2021-12-27 05:44:59
【问题描述】：

我有一个名为 ListScheduleComponent 的组件，它有一个功能可以打开带有 CreateScheduleComponent 视图的 mat-dialog：

  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'),
      },
    });
  }

还有一个加载所有事件的函数：

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

所以它看起来像这样：

现在在我的CreateScheduleComponent 我有一个提交功能：

onSubmit(): void {
    this.calendarService
      .createNewEvent(this.eventForm.value)
      .subscribe((response) => {
        if (response.statuscode===201) {
          //Call getAllEvents();
        } else {
          console.log(response.message);
        }
      });
  }

我知道如何通过this.dialogRef.close() 关闭此对话框，但我的问题是，如何调用 getAllEvents();来自ListScheduleComponent 组件在onSubmit() 之后的函数？

【问题讨论】：

标签： angular mat-dialog

【解决方案1】：

在对话框上订阅 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"),
        },
      })
      .afterClosed()
      .subscribe((res) => {
        // call getAllEvents() here
      });
  }

【讨论】：