如果每个 observable 都有新数据，我如何一次订阅 angular2 中的多个 observable 并等待? [英] How can i subscribe to multiple observables in angular2 at once and wait, if there is new data on each of them?

问题描述

我有一个角度组件，它使用 3 个服务.这些服务中的每一个都有一个观察者，我可以订阅它.必须更新组件的视图，如果观察到的任何更改，通过 websockets (feathers.js) 发生.我希望 doSomethingWithTheNewDataThatIsShownOnView() 在 ngInit 上只被调用一次，我想，我可以用 forkJoin 做到这一点:

i have a angular component, that uses 3 services. Each of those services has an observer, that i can subscribe to. The view of the component must be updated, if anything on the observed changes, that happens through websockets (feathers.js). I want the doSomethingWithTheNewDataThatIsShownOnView() to be called only once on ngInit and i think, i can do this with forkJoin:

private ngOnInit(): void {
    Observable.forkJoin(
        this.filesService.inputs$,
        this.filesService.outputs$,
        this.processesService.items$
    ).subscribe(
        data => {
          this.inputs = data[0];
          this.outputs = data[1];
          this.processes = data[2];
          this.doSomethingWithTheNewDataThatIsShownOnView();
          this.ref.markForCheck();
        },
        err => console.error(err)
    );

    this.filesService.find();
    this.processesService.find();
}

这按预期工作，但如果输入$ Observable 或输出$ Observable 上有新数据，则不会再次调用订阅.只有当三个 Observable 都有新数据时才会调用它.是否有类似如果所有三个 observables 都有新数据，则等待 100ms 的间隔，如果不只使用所有 observables 的新数据，直到现在都有新数据?"

That works as expected, but if there is new data on inputs$ Observable or outputs$ Observable, the subscribe is not beeing called again. It is only called, if all three Observables have new data. Is there something like "wait for a interval of 100ms if all three observables have new data, if not use only the new data of all observables, that have new data until now?"

我希望你明白，我想做什么 :D

I hope you understand, what i want to do :D

问候

克里斯

推荐答案

combineLatest() 应该可以解决问题:

private ngOnInit(): void {
    Observable.combineLatest(
        this.filesService.inputs$,
        this.filesService.outputs$,
        this.processesService.items$
    ).subscribe(
        data => {
          this.inputs = data[0];
          this.outputs = data[1];
          this.processes = data[2];
          this.doSomethingWithTheNewDataThatIsShownOnView();
          this.ref.markForCheck();
        },
        err => console.error(err)
    );

    this.filesService.find();
    this.processesService.find();
}

<小时>

关于您的代码的其他提示:

---

Additional hints on your code:

作为替代 combineLatest() 还采用可选的聚合方法，并且作为旁注:尝试仅使用纯函数并避免有状态的组件(this.inputscode>, this.outputs, ect..) 并使用 |模板中的 async 管道，并尽量避免订阅中的太多逻辑，如果可能的话，尽量避免手动订阅，因为必须手动取消订阅，但 async-pipe 可以自动为您处理:

As an alternative combineLatest() also takes an optional aggregation-method and also as a side-note: try to use pure functions only and avoid stateful components(this.inputs, this.outputs, ect..) and use the | async pipe in the template and try to avoid too much logic in the subscription and if possible try to avoid manual subscriptions at all, because those have to be manually unsubscribed but the async-pipe could handle that automatically for you:

autoUpdatedViewData$ = Observable.combineLatest(
        this.filesService.inputs$,
        this.filesService.outputs$,
        this.processesService.items$,
        (inputs, outputs, items) => ({inputs, outputs, items})
    )
    .map(({inputs, outputs, items}) => {
        return this.doSomethingWithTheNewDataThatIsShownOnView(inputs, outputs, items);
    });

private ngOnInit(): void {
    this.filesService.find();
    this.processesService.find();
}

// in your template
<div>{{autoUpdatedViewData$ | async}}</div>

这篇关于如果每个 observable 都有新数据，我如何一次订阅 angular2 中的多个 observable 并等待?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！