обновление данных на странице каждые X секунд для углового компонента

Question

Мне нужно обновлять данные угловой составляющей каждые 30 секунд.Я использую простой setInterval:

 this.interval = setInterval(() => {
               this.refresh(); // api call
            }, 10000);

Однако это неверно, потому что даже когда я перехожу на другую «страницу» (в угловом SPA все - одна страница, так что это не совсем другая страница),обновление происходит каждые 30 секунд.

Как правильно обновлять данные каждые 30 секунд только на определенной странице / компоненте?

Answer 1

Когда вы переходите на другую страницу, вы должны очистить интервал, который вы устанавливаете.

this.interval = setInterval(()=>{
  ...
});

navigateToAnotherPage = () => {
  //function to navigate to another page
  clearInterval(this.interval);
  router.navigate(...)//if you are using router to navigate
}

Answer 2

Вы можете очистить Interval в ngOnDestroy ловушке жизненного цикла компонента

ngOnDestroy() {
  clearInterval(this.interval);
}

ngOnDestroy будет вызывать каждый раз, когда компонент уничтожается в цикле дайджеста, а также очищает ваш интервал (если выСделай так).Обычно используется для вызова логики, которая нам не нужна после перехода текущего маршрута к другому.

Answer 3

Вы можете уничтожить интервал на OnDestroy ловушке жизненного цикла компонента.

Используя clearInterval(this.interval)

ngOnDestroy() {
   if (this.interval) {
     clearInterval(this.interval);
   }
}

Answer 4

попробуйте это.

routerOnActivate() {
   this.interval = setInterval(() => {
               this.refresh(); // api call
            }, 10000);
}

routerOnDeactivate() {
  clearInterval(this.interval);
}