angular - 如何在 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()？

标签： angularmat-dialog

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