角2 - RxJS Observableの間隔を変更する方法

Question

rxJS Observable Intervalを使用して、取得するデータを更新しています。私は間隔の設定を変更する方法を理解できません。私はrxJSが提供するSubjectクラスの使用について何かを見てきましたが、動作させることはできません。

私はこの方法を持っているAppComponentでこのplunk

に簡単な例を提供しました。

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

あなたの目標は、ユーザーがタイマー間隔を変更できるようにすることです。あなたが期待する

は、refreshIntervalのその変化はrxJsの宣言されたストリームを変更します：

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

を、これは間違っています。

たび、あなたはrefreshIntervalを更新し、以下を行う必要があります。

• は前のストリームを解除または破壊します。
• 新しいストリームを作成し、 あなたがrefreshIntervalを変更するために全体の観察可能なストリームを破棄し、再作成する必要はありません再び

Answer 2

購読します。変更する間隔に応じてストリームの一部を更新するだけで済みます。

最初にサービスのgetTime()を単純化して、出力の頻度を決定することはありません。それは時間を返します：

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

これで、呼び出しコードによってスケジュールが決定されます。わずか3簡単な手順：

所望の間隔に調整するソース関数：

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

再実行ストリームを連続的に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 

3.全部トリガするサブスクリプション：

を

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

refreshObs()はストリームが繰り返されるたびに新しい観測値を返し、新しい観測値は放出前に現在設定されている間隔に従って待機するためです。

Live demo