Question

我正在从数据库中获取所有设计（比如说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个调用）都需要时间。同时，如果要导航，则要取消所有这些呼叫。

我该怎么做？

Answer 1

这是清理高温可观察物的好方法。

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方法。就像您所迷恋的ngOnInit一样，它是Angular's Component Lifecycle hooks之一。

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

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

1 个答案: