Angular 2 - 如何更改RxJS Observable的时间间隔

我正在使用rxJS Observable Interval刷新正在读取的数据。我无法弄清楚改变间隔设置的方法。我已经看到了有关使用rxJS提供的Subject类的一些信息，但我无法设法使其运行。Angular 2 - 如何更改RxJS Observable的时间间隔

我在此plunk

在AppComponent我有这样的方法提供了一个简化的例子。

getTime() { 
     this.timeService.getTime(this.refreshInterval) 
      .subscribe(t => { 
      this.currentTime = t; 
      console.log('Refresh interval is: ' + this.refreshInterval); 
      } 
     ); 
}

而在服务组件中，我目前有这样的代码。

getTime(refreshInterval: number) { 
    return Observable.interval(refreshInterval) 
     .startWith(0) 
     .map((res: any) => this.getDate()) 
     .catch(this.handleError) 
}

有人可能会提供我一个工作的例子，这将是伟大的！

来源

2016-05-26 Magnus Wallström

正如我从你的plnkr了解到的，你的目标是允许用户修改定时器间隔。 rxJs的

你期望的那样，refreshInterval的这一变化将改变宣告流：

this.timeService.getTime(this.refreshInterval) 
     .subscribe(t => { 
     this.currentTime = t; 
     console.log('Refresh interval is: ' + this.refreshInterval); 
     } 
    );

，这是错误的。每次

，更新refreshInterval，您需要：

退订或破坏先前流。
创建新的流和再次

来源

2016-05-26 12:02:41

实际上，这个答案可能不准确。我能够完成既定的目标，而不会在与我一段时间的挣扎之后摧毁和重新创建流 – BeetleJuice

订阅你并不需要摧毁和重建整个可观测流改变refreshInterval。您只需要更新取决于更改间隔的流的部分。

首先简化您的服务getTime()，因此它不负责确定输出的频率。它所做的只是返回时间：

getTime() { return (new Date()).toString(); }

现在调用代码将确定计划。仅有3简单步骤：

1.其调整到所需的间隔A源功能：

/** Observable waits for the current interval, then emits once */ 
refreshObs() {return Observable.timer(this.refreshInterval)}

2.使用该repeat operator连续可观察到的链重新执行流：

getTime$ = Observable.of(null) 
      .switchMap(e=>this.refreshObs()) // wait for interval, then emit 
      .map(() => this.timeService.getTime()) // get new time 
      .repeat(); // start over

触发整个事情订阅：

ngOnInit(){ 
    this.getTime$.subscribe(t => { 
     this.currentTime = t; 
     console.log('refresh interval = '+this.refreshInterval); 
    }); 
}

这是可行的，因为refreshObs()每次重复流时都会返回一个新的observable，并且新的observable将根据当前设置的间隔等待发射。

Live demo

来源

2016-10-05 03:39:54 BeetleJuice

Angular 2 - 如何更改RxJS Observable的时间间隔

回答

相关问题