Angular 2 - 如何更改RxJS Observable的間隔

Question

我正在使用rxJS Observable Interval刷新正在獲取的數據。 我無法弄清楚改變間隔設置的方法。 我已經看到有關使用rxJS提供的Subject類的一些內容，但我無法讓它工作。

我在這個插件中提供了一個簡化的例子

在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)
}

有人可能會給我一個工作的例子，這將是偉大的！

Answer 1

您不需要銷毀並重新創建整個Observable流來更改refreshInterval 。 您只需要更新依賴於更改間隔的流的部分。

首先簡化服務的getTime()以便它不負責確定輸出的頻率。 它只是返回時間：

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

現在調用代碼將確定計划。 只需3個簡單的步驟：

1.調整到所需間隔的源函數：

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

2.使用repeat運算符連續重新執行流的可觀察鏈：

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

3.訂閱觸發整個事情：

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

這是因為每次重復流時refreshObs()返回一個新的observable，並且新的observable將在發出之前根據當前設置的間隔等待。

現場演示

Answer 2

我想在此處（以及Stack Overflow上的其他地方）建立先前的答案。 我的示例有一個通用的RefreshService ，各種組件可以使用它來進行訂閱。 這樣，站點可以有一個“刷新每X秒”組件，每個組件都可以訂閱。

https://plnkr.co/edit/960yztjl3dqXQD2XPSei?p=preview

該服務提供了提供Observable的函數withRefresh 。 它利用了BehaviorSubject ，它會立即觸發訂閱上的事件。

export class RefreshService {

  static interval$: BehaviorSubject<number> = new BehaviorSubject<number>(30000);

  setInterval(newInterval: number){
    RefreshService.interval$.next(newInterval);
  }

  public withRefresh() {
    return RefreshService.interval$
      .switchMap((int: number) => Observable
        .interval(int)
        .startWith(0)
      );
  }
}

然后任何組件都可以使用此服務，如下所示：

this.refreshService
  .withRefresh()
  .switchMap(() => /* do something on each interval of the timer */);

Answer 3

據我所知，您的plnkr，您的目標是允許用戶修改計時器間隔。

您期望，refreshInterval的更改將更改已聲明的rxJs流：

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

這是錯的。

每次更新refreshInterval時，您需要：

• 取消訂閱或銷毀以前的流。
• 創建新流並再次訂閱