角度| 使用计时器每 5 秒刷新一次表

Question

我在页面中使用材质表，并且希望表数据源每 5 秒刷新一次，以便值的任何更改都将反映在表中。这就是我现在所做的：

everyFiveSeconds: Observable<number> = timer(0, 5000);

ngOnInit() {
this.everyFiveSeconds.subscribe(() => {
  this.getComponents();
});

getComponents()发送获取请求并将输出分页到材料表。然而问题是，一旦我最初加载此页面，每 5 秒就会发出一次 get 请求。但即使我导航到另一个页面，应用程序也会继续发送请求。如果我重新访问该页面，请求每 2.5 秒发送一次，并且如果我重复，请求的频率会不断增加。

如何修改我的代码，以便仅当我位于此组件页面时才发送此 get 请求，并确保如果我重新访问此页面，不会创建多个计时器？

Answer 1

是这样的：

import { timer } from 'rxjs';

export class MyClass implements OnInit, OnDestroy {
    subscription: Subscription;
    everyFiveSeconds: Observable<number> = timer(0, 5000);
    
     ngOnInit() {
      this.subscription = this.everyFiveSeconds.subscribe(() => {
         this.getComponents();
       });
     }
    }
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
}