角度组件每 X 秒刷新一次页面上的数据

Question

我需要每 30 秒刷新一次角度组件的数据。 我使用简单的setInterval ：

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

但是，这是不正确的，因为即使我导航到另一个“页面”（在 Angular SPA 中，所有内容都是一页，因此它实际上不是另一页），每 30 秒刷新一次。

仅在特定页面/组件上每 30 秒刷新一次数据的正确方法是什么？

Answer 1

您可以在组件的OnDestroy生命周期挂钩上销毁时间间隔。

使用clearInterval(this.interval)

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

Answer 2

您可以在组件的ngOnDestroy生命周期钩子中ngOnDestroy

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

ngOnDestroy将在摘要循环中每次销毁组件时调用，它也会清除您的间隔（如果您这样做）。 通常用于在当前路线导航到另一个之后调用我们不需要的逻辑。

Answer 3

尝试这个。

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

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

Answer 4

当您导航到另一个页面时，您必须清除您设置的间隔。

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

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

Answer 5

尝试这个。

save: boolean = false;
autoSave() {
        setInterval(() => {
            console.log('setTimeOut');
            this.save = true;

        }, 1000);
}

Answer 6

您还可以利用反应式风格。

import { timer } from 'rxjs';
/*
  timer takes a second argument, how often to emit subsequent values
  in this case we will emit first value after 1 second and subsequent
  values every 2 seconds after
*/
const source = timer(0, 2000);
//output: 0,1,2,3,4,5......
const subscribe = source.subscribe(val => console.log(val));

参考 - https://www.learnrxjs.io/learn-rxjs/operators/creation/timer