Rxjs - 重新訂閱取消訂閱Observable

我正在使用服務來每隔2.5秒「ping」我的服務器，從我的服務器返回響應時間。因此我使用observables。Rxjs - 重新訂閱取消訂閱Observable

我也使用角2和打字稿。

我現在想停止點擊按鈕上的服務（取消訂閱）。這工作得很好！該按鈕應該是一個togglebutton，所以如果沒有訂閱，訂閱和其他方式。但重新訂閱不起作用！

這裏是我的服務：

export class PingService { 
    pingStream: Subject<number> = new Subject<number>(); 
    ping: number = 0; 
    url: string = url.href; 

    constructor(private _http: Http) { 
    Observable.interval(2500) 
     .subscribe((data) => { 
     let timeStart: number = performance.now(); 

     this._http.get(this.url) 
      .subscribe((data) => { 
      let timeEnd: number = performance.now(); 

      let ping: number = timeEnd - timeStart; 
      this.ping = ping; 
      this.pingStream.next(ping); 
      }); 
     }); 
    } 
}

這裏是我的點擊功能：

toggleSubscription() { 
     if (this.pingService.pingStream.isUnsubscribed) { 
     this.pingService.pingStream.subscribe(ping => { 
     this.ping = ping; 
     NTWDATA.datasets[0].data.pop(); 
     NTWDATA.datasets[0].data.splice(0, 0, this.ping); 
     }) 
     } 
     else { 
     this.pingService.pingStream.unsubscribe(); 
     } 
    }

我訂閱的PINGSERVICE我appcomponent的cunstructor內。數據顯示在圖表中。當我第一次點擊按鈕時，它停止服務，不再有數據更新。當我點擊下一次，沒有任何反應，雖然「this.pingService.pingStream.isUnsubscribed」返回true。

我的構造函數：

constructor(private location: Location, 
     private pingService: PingService) { 

      this.pingService.pingStream.subscribe(ping => { 
      this.ping = ping; 
      NTWDATA.datasets[0].data.pop(); 
      NTWDATA.datasets[0].data.splice(0, 0, this.ping); 
      }) 
    }

我也得到一個錯誤「ObjectUnsubscribedError」當我點擊按鈕的第一次。

任何幫助表示讚賞！謝謝！

來源

2016-08-15 Faigjaz

由於您使用RxJS，您不必訂閱/取消訂閱。只需考慮使用Rx流的另一種方法。這個想法是有2個流main和toggle流，所以他們結合起來，只有當你的toggle流打開時纔會觸發事件。

var mainStream = Rx.Observable.interval(100).map(() => '.'); 

var toggleStream = Rx.Observable 
       .fromEvent(toggle, 'change') 
       .map(e => e.target.checked); 

var resultStream = toggleStream 
        .filter(x => x === true) 
        .startWith(true) 
        .flatMap(() => mainStream.takeUntil(toggleStream)); 

resultStream.subscribe(x => display.innerText += x);

見sample fiddle

來源

2016-08-15 07:23:16

謝謝，這是一個好主意！我沒有那麼深入rxjs，不會很快注意到這一點。 :)現在我想知道是否可以在Observable.interval中設置不同的值。我希望用戶能夠設置他們想要的時間間隔。但是，由於可觀測值在我的app.component初始化時開始發射數據（我是否正確？），我不太確定這是否可行。 – Faigjaz

@Faigjaz看看這個問題http://stackoverflow.com/questions/34058398/change-interval-settings-of-observable-after-creation –

我會盡力通過它，謝謝！ – Faigjaz

Rxjs - 重新訂閱取消訂閱Observable

回答

相關問題