需要我的angular服务知道所有组件异步操作何时结束

我有一个角度服务，拥有一个可观察的。我订阅了多个（可变数量）的组件，它们对执行异步操作作出反应。我需要我的服务知道所有这些组件异步操作何时结束

这就是我的处境：

过滤服务

...

appliedFilter$: Observable<FormattedFilter[]> = new Observable<FormattedFilter[]>(
    o => (this.appliedFilter = o)
  ).pipe(shareReplay(1));
  private appliedFilter: Observer<FormattedFilter[]>;

  onFiltersApplied(filters: Filter[]): void {
    if (this.appliedFilter) {
      const formattedFilters = this.formatFilters(filters);
      this.appliedFilter.next(formattedFilters);
    }
  }

...

可过滤组件2

...

this.filterService.appliedFilter$.subscribe(filters => {
  // multiple pipelined async operations
});

...

可过滤组件3

...

this.filterService.appliedFilter$.subscribe(filters => {
  // multiple pipelined async operations
});

...

因此，我需要的是Filter服务来通知所有组件何时通过appliedFilter$Observable应用了接收到的过滤器，以及何时最终加载了所有过滤数据

这样做的目的是防止用户在所有组件完成过滤过程之前更新过滤器

---

谢谢

是否确实需要等待组件更新，而不是分别更新组件以过滤更改？ 在大多数友好、用户友好的应用程序中，方法似乎有所不同： 如果某个组件在应用新筛选器时未完成更新，则更新将被取消并重新启动

在您的例子中，可以使用rxjs操作符来实现。这个操作符允许您完全按照我刚才所说的去做——放弃当前的异步操作，如果有新的操作出现，就开始新的操作

以下是一个例子：

...

this.filterService.appliedFilter$
    .pipe(
        switchMap(
            filters => { return yourObservableChain()} // chain is your async opeartions
        )
    )
    .subscribe(); // you have only the most relevant values here

...

那么，接下来要做什么：

当应用新过滤器时，

YourObservaleCain

被调用（它可以是http请求或您所说的任何其他内容（异步操作）

如果在这些操作过程中再次应用新的筛选器，旧的筛选器将被忽略，调用将被取消，新的操作将开始

只有最相关的结果才会出现在订阅中

请注意，switchMap必须返回一个可观测值。下面是一个简短的示例，说明它在角度范围内的用法（使用http调用）

---

您确定需要等待组件更新，而不是分别更新组件以筛选更改吗？因此，如果应用新筛选器时某些组件没有更新，就让它取消当前更新并执行新操作。这就是好的应用程序通常的工作方式。@ArtemArkhipov我没有任何特定的需要。您的方法似乎不错。但我不确定如何取消当前的更新，因为它们可能非常复杂。我在下面为您发布了一个答案。谢谢，我会尝试一下。如果您能对您的案例进行最小程度的复制，将更容易帮助您并展示一些具体的内容

...

this.filterService.appliedFilter$
    .pipe(
        switchMap(
            filters => { return yourObservableChain()} // chain is your async opeartions
        )
    )
    .subscribe(); // you have only the most relevant values here

...

import { switchMap } from 'rxjs/operators'; // don't forget

... your components code:...

this.triggerSubject$.pipe( // assume this emits with some urls
    switchMap(data => { // assume new url is a prop of data
      return this.http.get(data.URL); // returns observable
    })
).subscribe(results => {
   // having only fresh results here
   // because switchMap cancelled other requests
   console.log(results) // or do whatever you need
})