각도 2 - 관찰 가능한 RxJS의 간격을 변경하는 방법

각도 2 - 관찰 가능한 RxJS의 간격을 변경하는 방법

가져올 데이터를 새로 고치기 위해 rxJS 관찰 가능 간격을 사용하고 있다.간격 설정을 변경하는 방법을 알 수 없다.나는 rxJS에서 제공하는 과목 수업을 사용하는 것에 대해 뭔가를 보았지만, 그것을 작동시킬 수가 없다.

나는 이 플렁크에서 간단한 예를 제공했다.

AppComponent에서 나는 이 방법을 가지고 있다.

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

누군가 나에게 작업적인 예를 들어줄 수 있을까? 그것은 정말 좋을 것이다!

관찰 가능한 전체 스트림을 파괴하고 재생성하여refreshInterval하면 된다변화하는 간격에 따라 달라지는 하천 부분만 갱신하면 된다.

먼저스스 simplify 를 단순화하십시오.getTime()그래서 출력 빈도를 결정하는 것은 담당하지 않는다.단지 시간을 되돌리는 것 뿐이다.

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

이제 통화 코드가 스케줄을 결정할 것이다.간단한 3단계:

1. 원하는 간격에 맞게 조정되는 소스 함수:

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

2. 운영자를 이용하여 지속적으로 스트림을 재실행하는 관측 가능한 체인:

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()스트림이 반복될 때마다 새로운 관측 가능을 반환하고, 새로운 관측 가능은 방출하기 전에 현재 설정된 간격에 따라 대기한다.

라이브 데모

나는 여기서(그리고 다른 곳에서 스택 오버플로에 대한) 이전의 답변을 바탕으로 하고 싶었다.나의 예는 공통점이 있다.RefreshService이렇게 는 각 요소가 할 수 고침" 요소를 한 수 이러한 방식으로 사이트는 각 구성 요소가 가입할 수 있는 단일 "X초마다 새로 고침" 구성요소를 가질 수 있다.

https://plnkr.co/edit/960yztjl3dqXQD2XPSei?p=preview

서비스는 기능을 제공한다.withRefresh은 ...을한다.을 제공하는.Observable 하다의 것이다.BehaviorSubject는 구독에 즉시 이벤트를 발생시킨다.

export class RefreshService {

  static interval$: BehaviorSubject<number> = new BehaviorSubject<number>(30000);

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

  public withRefresh() {
    return RefreshService.interval$
      .switchMap((int: number) => Observable
        .interval(int)
        .startWith(0)
      );
  }
}

그러면 어떤 구성 요소라도 이 서비스를 다음과 같이 사용할 수 있다.

this.refreshService
  .withRefresh()
  .switchMap(() => /* do something on each interval of the timer */);

당신의 plnkr로 이해한 바와 같이, 당신의 목표는 사용자가 타이머 간격을 수정할 수 있도록 하는 것이다.

예상하시겠지만, 그 기분전환의 변화는간격은 선언된 rxJs 스트림을 변경한다.

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

그리고 이건 잘못된 거야.

매번 업데이트 새로 고침간격:

• 이전 하천에 대한 구독을 취소하거나 파괴하다
• 새 스트림을 만들고 다시 구독하십시오.

참조URL: https://stackoverflow.com/questions/37458208/angular-2-how-to-change-the-interval-of-an-rxjs-observable