Angular问题：为何应用组件无法捕获错误处理器推送的Observable变更？

问题根源 #

Angular的全局ErrorHandler回调运行在NgZone（Angular变更检测上下文）之外。当你在handleError中调用Subject.next()时，该操作不会触发Angular的变更检测，因此AppComponent模板不会重新渲染——尽管Subject已推送错误值。而从其他组件推送错误时，代码运行在NgZone内，变更检测会自动触发，模板就能正常更新。

修复方案 #

1. 用NgZone包裹推送操作 #

修改ErrorService，注入NgZone并在其上下文内执行next()，确保变更检测被触发：

// error-service.ts
import { Injectable, ErrorHandler, NgZone } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ErrorService implements ErrorHandler {
  error = new Subject<Error>();

  constructor(private ngZone: NgZone) {}

  handleError(error: any): void {
    console.error('ERROR', error);
    // 在NgZone上下文内推送错误，触发变更检测
    this.ngZone.run(() => {
      this.error.next(error);
    });
  }
}

2. （可选）优化模板逻辑 #

原模板重复使用async管道，可改用else块简化，同时避免重复订阅：

<!-- app.component.html -->
<app-error-page *ngIf="error | async as err; else routerOutlet"></app-error-page>
<ng-template #routerOutlet>
  <router-outlet></router-outlet>
</ng-template>

3. （可选）改用BehaviorSubject #

如果需要让后续订阅的组件也能获取最新错误（比如延迟加载组件场景），可将Subject替换为BehaviorSubject：

// error-service.ts
import { BehaviorSubject } from 'rxjs';

// 初始化值为null，表示无错误
error = new BehaviorSubject<Error | null>(null);

// 推送错误时
this.ngZone.run(() => {
  this.error.next(error);
});

对应模板判断可调整为：

<app-error-page *ngIf="error | async; else routerOutlet"></app-error-page>

内容的提问来源于stack exchange，提问作者Jordan Walker