Question

我正在使用rxJS Observable Interval刷新正在获取的数据。我无法弄清楚改变间隔设置的方法。我已经看到有关使用rxJS提供的Subject类的一些内容，但我无法让它工作。

我在此plunk

中提供了一个简化示例

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

有人可能会为我提供一个很好的例子！

Answer 1

您无需销毁并重新创建整个Observable流即可更改refreshInterval。您只需要更新依赖于更改间隔的流的部分。

首先简化您的服务getTime()，以便它不负责确定输出的频率。它只是返回时间：

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

现在，调用代码将确定计划。只需3个简单的步骤：

1。调整到所需间隔的源函数：

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

2。使用repeat operator连续重新执行流的可观察链：

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()每次重复流时都会返回一个新的observable，并且新的observable会在发出之前根据当前设置的间隔等待。

Live demo

Answer 2

我想在此处（以及Stack Overflow上的其他地方）建立先前的答案。我的示例有一个共同的RefreshService，各种组件可以用于订阅。这样，一个站点可以每隔X秒刷新一次＆＃34;刷新＆＃34;每个组件都可以订阅的组件。

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 */);

Answer 3

据我所知，您的plnkr，您的目标是允许用户修改计时器间隔。

您希望，refreshInterval的更改将更改已声明的rxJs流：

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

这是错误的。

每次更新refreshInterval时，您需要：

取消订阅或销毁以前的流。
创建新流和再次订阅

Angular 2 - 如何更改RxJS Observable的间隔

3 个答案: