Angular | Обновлять sh таблицу каждые 5 секунд с таймером

Question

Я использую таблицу материалов на странице и хочу, чтобы источник данных таблицы обновлялся каждые 5 секунд, чтобы любое изменение значений отражалось в таблице. Вот что я сделал сейчас:

everyFiveSeconds: Observable<number> = timer(0, 5000);

ngOnInit() {
this.everyFiveSeconds.subscribe(() => {
  this.getComponents();
});

getComponents() отправляет запрос на получение и разбивает результат на страницы в таблице материалов. Однако проблема в том, что как только я загружаю эту страницу изначально, запрос на получение выполняется каждые 5 секунд. Но приложение продолжает отправлять запрос, даже если я перехожу на другую страницу. Если я повторно посещаю страницу, запрос будет отправляться каждые 2,5 секунды, и частота запросов будет увеличиваться, если я повторю его.

Как я могу изменить свой код, чтобы этот запрос на получение отправлялся только тогда, когда я сижу в эту страницу компонента, а также убедитесь, что если я еще раз посещу эту страницу, несколько таймеров не будут созданы?

Answer 1

Это примерно так:

export class MyClass implements OnInit, OnDestroy {
    subscription: Subscription;
    everyFiveSeconds: Observable<number> = timer(0, 5000);

     ngOnInit() {
      this.subscription = this.everyFiveSeconds.subscribe(() => {
         this.getComponents();
       });
     }
    }
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
}

Answer 2

Рекомендуется отказаться от всех своих подписок на наблюдаемые объекты, которые имеют неопределенное количество выбросов. Никогда не предполагайте, что фреймворк сделает это за вас. Вы можете сделать это с помощью отказа от подписки, но лично я предпочитаю делать это с помощью оператора Subject вместе с оператором takeUntil. Этот подход особенно полезен, если у вас есть несколько наблюдаемых объектов, от которых вы хотите отказаться (хотя мне нравится сохранять шаблон во всем моем коде, поэтому я использую его, даже если у меня есть одна подписка, о которой нужно позаботиться):

private _destroy$ = new Subject<void>();

ngOnInit() {
  this.everyFiveSeconds
    // You can do this with all of your subscriptions
    // using a single _destroy$ variable
    .pipe(takeUntil(this._destroy$))
    .subscribe(() => {
      this.getComponents();
    });
}

ngOnDestroy() {
  if(this._destroy$ && !this._destroy$.closed) {
    this._destroy$.next();
    this._destroy$.complete();
  }
}