Angular |使用定时器每 5 秒刷新 table

Question

我在页面中使用 material table，我希望 table 数据源每 5 秒刷新一次，以便值的任何变化都将反映在 table。这就是我现在所做的：

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

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

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

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

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

Answer 2

建议您退订所有对发射次数不确定的可观察量的订阅。永远不要假设框架会为你做这件事。您可以使用取消订阅来做到这一点，但我个人更喜欢使用 Subject 和 takeUntil 运算符来完成。如果您有多个要取消订阅的可观察对象，这种方法特别有用（尽管我喜欢在我的代码中保留一个模式，所以即使我有一个订阅需要处理，我也会使用它）：

private _destroy$ = new Subject<void>();

ngOnInit() {
  this.everyFiveSeconds
    // You can do this with all of your subscriptions
    // using a single _destroy$ variable
    .pipe(takeUntil(this._destroy$))
    .subscribe(() => {
      this.getComponents();
    });
}

ngOnDestroy() {
  if(this._destroy$ && !this._destroy$.closed) {
    this._destroy$.next();
    this._destroy$.complete();
  }
}

Angular |使用定时器每 5 秒刷新 table

Angular | Refresh table every 5 seconds with Timer

angular-material

angular

mat-table