分别调用RxJS concatMap订阅进行第二次Observable

Question

我正在编写Angular 6应用。 我希望它在路由更改以及有任何未决的http请求时显示加载动画。 所以我有2个Observables看起来像这样。 对于httpPendingRequests，我使用Angular的HttpInterceptor编写的计数器来实现； 对于locationChanged，我已经订阅了Router的NavigationStart / NavigationEnd事件。

httpPendingRequests: BehaviorSubject<number>;
locationChanged: BehaviorSubject<boolean>;

我正在使用concatMap订阅这两个Observable，代码如下所示：

this.locationChanged.pipe(
  concatMap(changed => {
    console.log('location change:' + changed);
    if (changed) {
      return this.httpPendingRequests;
    } else {
      return of(0);
    }
  }),      
  map(count => count > 0)
).subscribe(val => { 
  console.log('isloading: ' + val);
});

因此，我希望只有在更改位置以及有任何待处理的请求时，此命令才能将“正在加载”日志记录到控制台。 在这种情况下它确实起作用。 但是，我发现当只有待处理的http请求但位置未更改时，它还会记录“正在加载”消息。 这让我感到困惑，我以为操作员正在确保可观察变量的订购顺序？ 如果第一个（位置更改）没有发出，那么第二个（待处理的请求）不应该被触发？ 我是否理解这个概念错误？

此外..我还尝试了其他方法来组合Observables，zip，forkJoin，combinateLatest-在我的情况下，它们都仅触发一次订阅，因此我也不太确定出了什么问题。

如果需要，我很高兴提供更多信息。 提前致谢

Answer 1

可以通过使用combineLatest和map运算符来解决。 这是演示： https : //stackblitz.com/edit/so-rxjs-concat 。

代码在app.component.ts 。 查看console.log值以了解更多信息。

Answer 2

您可能想看看您正在使用BehaviorSubject的事实。

BehaviorSubject始终需要一个在创建时发出的值。 这意味着locationChanged总是发出至少一个通知。

如果您更喜欢使用“ Subject ，则可以控制何时发出第一个通知。

在下面的示例中，直接从您的代码获取，您不会看到任何记录，因为locationChanged从不发出。

const httpPendingRequests = new BehaviorSubject<number>(0);
const locationChanged = new Subject<boolean>();

locationChanged.pipe(
    concatMap(changed => {
      console.log('location change:' + changed);
      if (changed) {
        return httpPendingRequests;
      } else {
        return of(0);
      }
    }),      
    map(count => count > 0)
  ).subscribe(val => { 
    console.log('isloading: ' + val);
});

setTimeout(() => {
    httpPendingRequests.next(1);
}, 100);
setTimeout(() => {
    httpPendingRequests.next(2);
}, 200);
setTimeout(() => {
    httpPendingRequests.next(3);
}, 300);