使用RouteReuseStrategy时如何停止组件中的计时器?

时间:2019-07-16 07:00:28

标签: angular angular-router

我有一个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时,该组件已成功销毁,我可以取消订阅计时器。但是,如果实现路由重用,则不会破坏该组件。

这是个小矮人: https://plnkr.co/edit/bVuSwXwKfy86mkAHtS48?p=preview

src / gridWithTimer.ts显示一个网格并具有一个计时器。查看人员详细信息时,计时器将退订。

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

(请打开控制台以查看调试消息)

我想使用路由重用来缓存网格结果,但是我还希望能够在用户查看详细信息组件(或任何其他组件)时停止计时器。我以为我陷入了组件生命周期的错误部分?

1 个答案:

答案 0 :(得分:0)

我认为您应该从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