Вызов функции никогда не останавливается при смене компонента по маршруту

Question

У меня есть этот файл угловых компонентов

export class MyComponent implements OnInit {
  updateValue() {
    // getting api data from the backend
  }

  ngOninit() {
    setInterval(()=>{
      this.updateValue()
    }, 5000)
  }
}

Теперь, что здесь происходит, когда при переходе к другому компоненту мой setinterval продолжает работать и получает данные из бэкэнда. Есть ли решение для этого или угловатых работ таким образом. Я хочу, чтобы при переходе к другому компоненту setInterval автоматически останавливался.

Дополнительно - я перехожу от дочернего компонента к родительскому компоненту

, т.е. от /home/dashboard ----->/home

Answer 1

Сохраните ссылку на this.interval и используйте обработчик ngOnDestroy, чтобы остановить интервал, когда пользователь уходит с помощью clearInterval.

https://angular.io/api/core/OnDestroy

https://angular.io/guide/lifecycle-hooks

ngOnInit() {
  this.interval = setInterval(() => {
    this.updateValue()
  }, 5000)
}

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

Answer 2

почему бы не использовать таймер rxjs?

isAlive=true;
ngOnInit()
{
  timer(0,5000).pipe(
    takeWhile(()=>this.isAlive),
    switchMap(()=>{
       return myService.getData()
    }).subscribe(res=>{
       //here you has the data from your service
    })
}
ngOnDestroy()
{
    this.isAlive=false;
}