错误后角度停止监听 EventEmitter答案

【问题标题】：Angular stop listening to EventEmitter after error错误后角度停止监听 EventEmitter
【发布时间】：2020-12-23 09:42:13
【问题描述】：

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

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

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

【问题讨论】：

您是否通过控制台登录以确保执行此行 return observableOf([]);?
第一次出错时执行一次。

标签： angular error-handling event-handling

【解决方案1】：

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

请改用mergeMap。

参考：

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

当一个新的内部 Observable 被发射时，switchMap 停止从之前发射的内部 Observable 发射项目，并开始从新的发射项目。对于后续的内部 Observable，它会继续以这种方式运行。

【讨论】：

1.我想保留我的switchMap，因为它允许我取消预览请求。 2. 这并不能解决问题。

【解决方案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);
  });

【讨论】：