订阅中的代码被多次执行

时间:2019-01-18 16:27:17

标签: angular

我在项目中使用ng-zorro组件,我想展示一个调用服务以删除条目的模型,这就是我定义删除确认对话框的方式:

  showDeleteConfirm(id: string): void{
    this.modal.confirm({
      nzTitle: 'Êtes-vous sûr de vouloir supprimer ce enregistrement ?',
      nzOnOk: () => {
          this.service.delete(id).subscribe(data => {
          this.notification.create("success", "Suppression", "L'enregistrement a été supprimée !");
        });
      }
    });
  }

但是我遇到了一个问题,其中subscribe函数中的代码被多次执行。

我该如何解决?

编辑:

这是我的删除功能:

delete(id: string): any{
  return this.http.delete<Entity>(this._apiURL + id, this.httpOptions).pipe(
    catchError(this.handleError)
  );
}
private handleError(err: HttpErrorResponse) {
  let errorMessage = '';
  if (err.error instanceof ErrorEvent) {
    errorMessage = `An error occurred: ${err.error.message}`;
  } else {
    errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
  }
  return errorMessage;
}

1 个答案:

答案 0 :(得分:1)

如果要确保一次执行订阅中的代码,可以使用take(1)first()

示例:

this.service.take(1).subscribe(...);

此外,最佳实践始终是使用takeUntil()并将其销毁,例如在ngOnDestroy

class myComponent {
  private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);

  constructor(
    private service: Service) {}

  ngOnInit() {
    this.service
      .takeUntil(this.destroyed$)
      .subscribe(...);
  }

  ngOnDestroy() {
    this.destroyed$.next(true);
    this.destroyed$.complete();
  }
}