Стоит ли отписываться от наблюдаемых в корне угловой компонент? - PullRequest
3 голосов
/ 07 октября 2019

В моем корневом (загруженном) компоненте Angular (6.x) есть Observable, AppComponent.
Обычно я бы отписался от любой открытой подписки при вызове destroy () с использованием ловушки жизненного цикла, ngOnDestroy.
Поскольку AppComponent является корнем приложения и, следовательно, никогда не уничтожается (за исключением случаев, когда уничтожается все приложение), нужно ли мне по-прежнему реализовывать ngOnDestroy, и мне нужно беспокоиться о том, чтобы отписаться от подписки?

Мне не удалось найти ответ на этот, казалось бы, обычный, точный сценарий.

Пример:

export class AppComponent implements OnInit, OnDestroy {
  private tokenSubscription: Subscription;
  constructor(private dataSvc: DataService) { }
  ngOnInit() {
    this.tokenSubscription = this.dataSvc.myObservable.subscribe((val) => {
      // do stuff
    });
  }
  ngOnDestroy() {
    this.tokenSubscription.unsubscribe(); // Do I need this in root component?
  }
}

Спасибо!

1 Ответ

0 голосов
/ 07 октября 2019

Однократные подписки в AppComponent.ngOnInit () - это нормально.

RXJS-подписки в Angular AppComponent не требуют отмены подписки, если новые подписки не создаются повторно. Хорошо, например, если подписки создаются в ngOnInit из AppComponent, если они являются одноразовыми.

Услуги Angular, предоставляемые в корне, в идеале должны быть Singleton Services

Для сервисов Angular, созданных в корневом компоненте, идеально использовать одноэлементные сервисы, чтобы гарантировать, что в приложении существует только один экземпляр.

Рекомендации

Хотя обычно в корневом компоненте подписки не отменяются, рекомендуется следовать рекомендациям по управлению подписками.

  • take(1) - для подписок, которые происходят только один раз во время запуска приложения, используйте оператор RXJS take(1), который автоматически отменяет подписку.
  • async Pipe - обрабатывает подписки RXJS за кулисами и автоматически отписывается.

Пример использования take(1)

constructor(private dataSvc: DataService) { }

ngOnInit() {
  this.dataSvc.myObservable.pipe(take(1)).subscribe((val) => {
    // do stuff
  });
}

См. Лучший способ отменить подписку RxJS Observables в угловых приложениях!

...