Ionic2 / Angular 2 Observable.timer复制

Question

我在Ionic 2项目中创建了一个Observable.timer来倒计时（例如00：00：59-> 00：00：00）。例如，我在名为“PageB”的页面中创建了计时器，下面是打字稿代码：

export class PageB {
 constructor(){
this.timer = Observable.timer(500,500).map(i=>this.result-i*503).take((this.result-575999970)/503).subscribe(i => 
{
this.time=i;
console.log(i);
console.log(moment(this.time).format('HH:mm:ss'));
});
}
}

以上代码的Console.log输出：

然而，我遇到一个问题，当我从PageB离开前一页然后再回到PageB时，该计时器会被复制（PageB-＆gt; previous page-＆gt; PageB）。

重复的情况：

您可以看到00：00：47,00：00：46，其余的都重复了很多次。离开PageB时我无法使用"this.timer.unsubscribe()"来停止计时器，因为我需要它在后台继续倒计时。

因此，谁能告诉我如何解决这个问题？感谢

Answer 1

您可以将Observable移动到提供者并使用Subject以确保只有一个计时器。

export class TimerProvider {
 constructor(){
}
timerSubject:Subject<any>;

loadTimer(){

Observable.timer(500,500).map(i=>this.result-i*503).take((this.result-575999970)/503).subscribe(i => 
{
this.timerSubject.next(i);
});
}

getTimer(){
 if(!this.timerSubject(){
   this.timerSubject = new Rx.Subject();
   this.loadTimer();
 }
 return timerSubject.asObservable();
}
}

在你的pageB中：

export class PageB {
 constructor(private timeProvider:TimerProvider){
this.timer = this.timeProvider.getTime().subscribe(i => 
{
this.time=i;
});
}
}

ngOnDestroy(){
   this.timer.unsubscribe();
}

只要您的提供者是单身人士，您将拥有一个计时器，它将在第一次打开B页时启动。