Angular 出错后停止监听 EventEmitter

Question

我有一个合并监听几个事件并从服务中检索数据以响应，如果服务抛出错误，则不再监听事件 - 至少看起来如此，因为调试事件显示它们触发以及其他组件听他们回应。 我假设这是错误的结果，但由于我有一个捕获错误，我无法弄清楚为什么会发生这种情况。

这是一个简化的代码示例：

ngOnInit(): void {
    merge(event1, event2)
         .pipe(
             switchMap(event => {
                 return this.service.loadResults()
                     .pipe(catchError(() => {
                         return observableOf([]);
                     }));
             }))
             .subscribe(data => {
                this.entityList = data;
             });
}
      

其他没有帮助的尝试：

ngOnInit(): void {
    merge(event1, event2)
      .pipe(
        switchMap(event => {
          return this.service.loadResults();
        })).pipe(
          catchError(() => {
            return observableOf([]);
          })
        )
      )
      .subscribe(data => {
        this.entityList = data;
      });
}

和：

ngOnInit(): void {
    merge(event1, event2)
     .pipe(
         switchMap(event => {
             return this.service.loadResults();
         }),
         catchError(() => {
                return observableOf([]);
            }))
         .subscribe(data => {
            this.entityList = data;
         });
}



   

Answer 1

这就是 RxJS switchMap的工作原理。 一旦再次调用project function 以生成新的Observable ，它将取消订阅其project参数返回的Observable 。

改用mergeMap 。

参考：

https://rxjs-dev.firebaseapp.com/api/operators/switchMap#description

当一个新的内部 Observable 被发射时，switchMap 停止从之前发射的内部 Observable 发射项目，并开始从新的发射项目。 对于后续的内部 Observable，它继续表现得像这样。

Answer 2

我在stackbliz.com中对其进行了测试，当我手动抛出错误时它可以工作，但我认为它与服务中的抛出错误相同。 这是演示： https://stackblitz.com/edit/angular-ivy-gvvwbb?file=src/app/app.component.ts

merge(this.event1, this.event2)
  .pipe(
    switchMap(event => {
      return throwError("error").pipe(
        catchError(() => {
          return of(
            event.target["innerHTML"] === "event1 div"
              ? "catch error from div 1"
              : "catch error from div 2"
          );
        })
      );
    })
  )
  .subscribe(data => {
    console.log("data = ", data);
  });