时间戳

首页 > 解决方案 > 使用RouteReuseStrategy时如何停止组件中的计时器？

angular - 使用RouteReuseStrategy时如何停止组件中的计时器？

问题描述

我有一个 Angular 8 应用程序，并且正在通过 RouteReuseStrategy 使用路由重用。我想在一个组件中进行轮询刷新，所以我实现了间隔订阅。在我的示例中，它每秒将当前时间输出到控制台。

export class GridComponent implements OnDestroy {
  private gridTimer: Subscription;

  constructor() {
    console.log('setting refresh timer');
    this.gridTimer = interval(1000).subscribe(() => {this.timerTick()});

  }

  ngOnDestroy(){
    console.log('unsubscribe grid timer');
    this.gridTimer.unsubscribe();
  }

  timerTick(){
    let date = new Date();
    console.log('timer tick: ' + date.toTimeString());
  }
}

当我关闭我的 RouteReuseStrategy 时，组件被成功销毁，我可以取消订阅我的计时器。但是，如果实现了路由重用，则组件不会被破坏。

这是一个 plunker： https ://plnkr.co/edit/bVuSwXwKfy86mkAHtS48?p=preview

src/gridWithTimer.ts 显示一个网格并有一个计时器。查看一个人的详细信息时，计时器将取消订阅。

在 src/app.ts 中，注释掉第 28 行并在第 29 行注释以打开路由重用。查看一个人的详细信息，计时器继续计时。

（请打开控制台以查看调试消息）

我想使用路由重用来缓存网格结果，但我也希望能够在用户查看详细信息组件（或任何其他组件）时停止计时器。我假设我连接到组件生命周期的错误部分？

标签： angularangular-router

解决方案

我认为你应该从 CustomReuseStrategy 发送信号，即通过 RxJS.Subject，

在组件使用中

interval(1000)
  .pipe(
    takeUntil(subjectFromStartegy),
    repeat() //optional
  )
  .subscribe(() => {this.timerTick()})

https://www.learnrxjs.io/operators/filtering/takeuntil.html https://www.learnrxjs.io/operators/utility/repeat.html

推荐阅读