通过路由更改组件时，函数调用永远不会停止

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;
}