Rxjs - 重新订阅未订阅的 Observable

Question

我使用服务每 2.5 秒“ping”一次我的服务器，从我的服务器返回响应时间。因此，我正在使用 observables。

我也在使用 angular 2 和 typescript。

我现在想在单击按钮时停止服务（取消订阅）。这工作得很好！该按钮应该是一个切换按钮，所以如果没有订阅，订阅和其他方式。但是重新订阅不起作用！

这是我的服务：

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();
      }
   }

我正在我的 appcomponent 的 cunstructor 中订阅 PingService。 数据显示在图表中。当我第一次单击该按钮时，它会停止服务，不再更新数据。当我下次单击时，没有任何反应，尽管“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”。

感谢任何帮助！谢谢！

Answer 1

由于您使用的是 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