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的時間間隔

回答

相關問題