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

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

2 个答案: