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

Question

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

  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()?

之后

Answer 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
      });
  }

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

How to call a function after mat-dialog closed in Angular 12

angular

mat-dialog