입력을 통해 관찰 가능 간격 변경

Question

내 서버에 "ping"하고 응답 시간을 반환하는 서비스를 사용하고 있습니다. 나는 이것을 차트에 표시한다.

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

나는 "핑 (ping)"을 받고 있어요 : 이것은 내 app.component의 cunstructor에

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

를 호출됩니다 : (간격을 변경할 수있는없이)

내 첫 번째 방법이 있었다 그것을 내 chartdata에 넣으십시오. 잘 작동합니다. 이제 intervall을 변경하고 싶습니다. 따라서 INTVL이라는 변수 만 내보내는 streamintervall.ts를 만들었습니다. 이 게시물의 답변을 사용하려 : 작동하지 않는 상태에서 이제 난 Change Intervall/settings of observable after creation

합니다. 내 차트 데이터는 0부터 세고 있습니다. 내 appcomponent에서

observable = this.pingStream.startWith(INTVL) 
    .switchMap((INTVL) => { return Observable.interval(INTVL) }); 
     constructor(private _http: Http) { 
      this.observable.map((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); 
       }); 
      }) 

은 내가 2WAY가 intvl = INTVL에 바인딩 입력 - 텍스트 상자가 있습니다. rxjs는 들어 오기가 어렵 기 때문에 경험이 없기 때문에이 문제를 어떻게 처리해야할지 모르겠다. 자세한 도움말은 매우 감사하겠습니다.

자세한 정보가 필요하면 알려주십시오.

편집 : 두 번째 접근 방식 - 지금 입력 간격으로 버튼 클릭에 새로운 스트림을 만드는 오전 : pingservice.ts :

createNew(intvl: number) { 
     this.pingStream = new Subject<number>(); 
     Observable.interval(intvl) 
     .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); 
      }); 
     }); 
    } 

app.component.ts : 그래서

newSubscription() { 
     console.log(this.pingService.pingStream.isUnsubscribed); 
     if (!this.pingService.pingStream.isUnsubscribed) { 
     this.pingService.pingStream.unsubscribe(); 
     } 
     if (this.pingService.pingStream.isUnsubscribed) { 
     this.pingService.createNew(this.intvl) 
     this.pingService.pingStream.subscribe(ping => { 
      this.ping = ping; 
      NTWDATA.datasets[0].data.pop(); 
      NTWDATA.datasets[0].data.splice(0, 0, this.ping); 
     }) 
     } 
    } 

, pingService 작동을 멈추게되면, 새로운 Stream이 생성되고 올바른 Intervall을 사용합니다. 이제 또 다른 문제가 있습니다 : 새로운 것을 생성 한 후에 pingStream을 구독 할 때, 전에 생성 된 다른 모든 pingStream에도 가입 (또는 최소한 생각합니다)하여 데이터를 전달하는 여러 스트림으로 연결됩니다. 5 클릭 = 5 스트림. 스트림을 "파괴"하고 새로운 스트림을 만드는 방법이 있습니까?

Answer 1

한 가지 방법은 원하는 간격을 방출하고 switchMap 및 flatMap의 조합을 사용하는 Subject을 사용하는 것입니다 할 수 있습니다. interval$에서 탈퇴하여 핑 (ping)을 일시 중지 할 수 있습니다. ping을 다시 시작하려면 resubscribe를 누르고 setInterval으로 다시 전화하십시오. 또는 BehaviorSubject을 사용하십시오.

interval$: Subject<number> = new Subject<number>(); 

constructor(){ 
    this.interval$ 
    .switchMap((int: number) => Observable //switch to Observable with new interval 
     .interval(int) 
     .flatMap(() => StreamOfPings) //execute time measurement function 
    ) 
    .subscribe(res => console.log(res)); 
} 

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