时间戳

首页 > 解决方案 > RxJs - 取消点击上的所有子事件（导航到另一个选项卡）

angular - RxJs - 取消点击上的所有子事件（导航到另一个选项卡）

问题描述

我从数据库中获取所有设计（比如说 100 个）并循环它们。

我正在使用子调用加载每个设计图像

    <div *ngFor="let design of designs">
      <div (click)="showDesignDetails(design.designId)">
          <app-thumbnail [designId]="design.designId"></app-thumbnail>          
      </div>
    </div>

在子组件中，我的代码如下所示。

ngOnInit() {
this.designService.getDesignById(this.designId).subscribe(
  design => {
    this.designLoaded = true;        
  },
  error => (this.errorMessage = error)
);
}

显然，每个设计图像（100 个调用）都需要时间。同时，如果我想导航，我想取消所有这些电话。

我怎样才能做到这一点？

标签： angularrxjs

解决方案

这是清理热可观察对象的好模式。

private destroy$ = new Subject();

ngOnInit() {
  this.designService.getDesignById(this.designId)
    .pipe(takeUntil(this.destroy$))
    .subscribe(
    design => {
      this.designLoaded = true;        
    },
    error => (this.errorMessage = error)
  );
}


ngOnDestroy() {
   this.destroy$.next();
   this.destroy$.complete();
}

编辑问题：

ngOnDestroy导航离开页面时调用该方法。它是Angular 的组件生命周期钩子之一，就像ngOnInit您正在钩子一样。

您的组件现在需要实现以下（至少）： implements OnInit, OnDestroy

推荐阅读