Rxjs - 구독 취소로 관찰 됨 Observable

Question

서비스를 사용하여 2.5 초마다 내 서버에 "핑 (ping)"서비스를 보내고 서버에서 응답 시간을 반환합니다. 그러므로 나는 관찰 대상을 사용하고있다.

나는 각 2와 타이프 스크립트도 사용하고 있습니다.

이제 버튼 클릭시 서비스 (수신 거부)를 중단하고 싶습니다. 이것은 잘 작동합니다! 버튼은 토글 버튼이어야하므로 구독하지 않으면 구독하고 다른 방법으로 구독합니다. 그러나 다시 가입하는 것은 효과가 없습니다! 여기

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 스트림을 사용하는 다른 방법을 고려하십시오. 아이디어는 두 개의 스트림 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