我有一个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行以打开路由重用。查看人员的详细信息,计时器继续计时。
(请打开控制台以查看调试消息)
我想使用路由重用来缓存网格结果,但是我还希望能够在用户查看详细信息组件(或任何其他组件)时停止计时器。我以为我陷入了组件生命周期的错误部分?
答案 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