Angular 。当modal关闭时，订阅触发多次

我有一个打开模态的代码。关闭模式时，将调用

this.loadClientOccupations（）

并刷新信息

  openAddOccupationComponent(servicePeriod: IServicePeriod): void {
    this.diaglogRef.open(OccupationAddComponent, {
      width: '25%',
      minHeight: '60%',
      data: {
        servicePeriod: servicePeriod
      },
      panelClass: 'no-padding-modal',
      disableClose: true
    });

    this.diaglogRef.afterAllClosed.subscribe(() => {
      this.loadClientOccupations();
    })
  }

但是，如果再次打开模式，然后关闭它，则会发生两次调用this.loadClientOccupations（）。第三次打开并关闭模式，然后对this.loadClientOccupations（）进行三次调用。这只是不断增长。有没有办法将这些调用限制在第一个事件？是不是有些东西没有被摧毁，需要被摧毁？这是关闭模式的代码

  addOccupation(occupationDetails: IOccupation){
const occupation: IAddClientOccupationDetails = {
  occupationId: occupationDetails.id,
  servicePeriodSequence: this.data.servicePeriod.servicePeriodSequence,
  endDate: this.addOccupationForm.controls['endDate'].value,
  reserveClassType: this.addOccupationForm.controls['reserveClass'].value,
  startDate: this.addOccupationForm.controls['startDate'].value,
  clientId: this.clientId
};

let command: IAddClientOccupationsCommand = {
  clientOccupationInformation : occupation
};

this.clientOccupationService.addClientOccupations(command).subscribe(res =>
{
  this.dialogRef.close(occupation);
},(err: HttpErrorResponse) => {
  this.occupationEditError = new CarsError();
  this.occupationEditError.errorMessages = err.error.errors.ClientOccupationInformation;
  console.log(this.occupationEditError);
});

}

使用

afterClosed（）

方法，而不是

afterAllClosed

。此外，为了避免内存泄漏，您需要取消订阅。在您的情况下，使用

take

操作符。因此，您的代码将变成：

openAddOccupationComponent(servicePeriod: IServicePeriod): void {
  const diaglogRef = this.diaglog.open(OccupationAddComponent, {
  width: '25%',
  minHeight: '60%',
  data: {
    servicePeriod: servicePeriod
  },
  panelClass: 'no-padding-modal',
  disableClose: true
});

dialogRef.afterClosed().pipe(
    take(1)
).subscribe(() => {
    this.loadClientOccupations();
})

}

将构造函数更改为：

constructor(dialog: MatDialog) { }

---

链接到官方网站。请检查此处的代码以了解更多信息。

我正在获取core.js:5980错误类型错误：this.diaglogRef.afterClosed不是一个函数。我遗漏了什么吗？您使用的是什么版本的angular？我使用的是版本11I我假设您的

dialogRef

类型为

MatDialog

。这样做是错误的。根据我更新的answerdialogRef类型MatDialog更改代码