Отмените подписку / отмените все запросы http, когда любой компонент уничтожен

Question

У нас есть много компонентов, которые отправляют http-запрос для получения своих данных.Мне было поручено отменить http-запросы, когда компонент был уничтожен.Поэтому я могу перейти к каждому отдельному компоненту, внедрить ngOnDestroy() и сохранить подписку http как член класса компонента, но у нас слишком много компонентов, чтобы я мог войти и сделать это один за другим.

Есть ли способ сообщить угловому, что когда любой компонент будет уничтожен, отменит все его http-запросы?

Answer 1

Другой вариант - определить лучший шаблон подписки, чтобы вам не нужно было отписываться.

Например, вы можете сделать что-то вроде этого:

export class ProductEditComponent implements OnInit, OnDestroy {
  componentActive = true;

  ngOnInit(): void {

    // Watch for changes to the currently selected product
    this.store.pipe(
      select(fromProduct.getCurrentProduct),
      takeWhile(() => this.componentActive)
    ).subscribe(
      currentProduct => this.displayProduct(currentProduct)
    );

  ngOnDestroy(): void {
    this.componentActive = false;
  }

}

Обратите внимание на takeWhile.Это гарантирует, что все подписки останавливаются при уничтожении компонента.

Более подробную информацию можно найти здесь: https://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/ (Но учтите, что код, показанный в этом посте, предназначен для более старой версии RxJS.)