RxJs - Отмена всех дочерних событий при нажатии (переход на другую вкладку)

Question

Я получаю все проекты (скажем, 100) из базы данных и зацикливаю их.

Я загружаю каждое изображение дизайна, используя дочерний вызов

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

и в дочернем компоненте myкод выглядит следующим образом.

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 вызывается, когда страница удалена от. Это один из крючков Angular's Component Lifecycle , как и ngOnInit, в который вы цепляетесь.

Ваш компонент должен будет реализовать следующее (по крайней мере) сейчас: implements OnInit, OnDestroy