Angular中Service更新组件视图不生效问题求助

我尝试通过Service中的变量控制ng-container的显示/隐藏，该变量会在捕获应用所有异常的全局错误处理器中修改，具体实现如下：

ErrorsService实现 #

export class ErrorsService {
  private notify = new BehaviorSubject(false);
  // 暴露给组件订阅的Observable
  cast = this.notify.asObservable();

  // 更新通知状态
  notifyError(){
    this.notify.next(true);
  }

  constructor() { }
}

全局错误处理器实现 #

export class GlobalErrorHandler implements ErrorHandler {
  constructor(private errorService: ErrorsService) { }
  
  handleError(error: any) {
    // 通知订阅者发生错误
    this.errorService.notifyError();
    // 后续错误处理逻辑
  }
}

组件实现 #

export class ErrorsBlockComponent implements OnInit {
  show = false;
  
  constructor(private errorsService:ErrorsService) {}

  ngOnInit(): void {
    this.errorsService.cast.subscribe(value=>{
      this.show = value;
      console.log(this.show); // 能看到值变为true，但UI无变化
    });
  }
}

组件模板：

<ng-container *ngIf="show">There is an Error!</ng-container>

问题现象 #

show变量已成功变为true，但视图不会自动更新，直到点击页面任意按钮触发交互后，UI才会显示错误提示。使用ChangeDetectorRef.detectChanges()手动触发变更检测可以修复，但想了解无需该方法时失效的根本原因。

Angular的变更检测机制只会在特定上下文内自动触发，比如用户交互、HTTP请求完成、定时器回调等（这些操作都运行在Angular的NgZone中）。

而全局错误处理器的handleError方法，是在Angular的正常变更检测周期之外执行的：当应用抛出未捕获异常时，Angular的变更检测流程被中断，此时调用notify.next(true)更新BehaviorSubject，订阅回调中修改组件show变量的操作，并没有处于Angular的变更检测上下文里。Angular无法感知到组件状态的变化，因此不会自动更新视图。只有当用户点击按钮等操作触发新的变更检测周期时，Angular才会发现show的值已改变，进而更新UI。

方案1：用NgZone将状态更新包裹在Angular上下文内 #

在ErrorsService中注入NgZone，将next()调用包裹在ngZone.run()中，确保状态更新触发变更检测：

import { NgZone } from '@angular/core';

export class ErrorsService {
  private notify = new BehaviorSubject(false);
  cast = this.notify.asObservable();

  constructor(private ngZone: NgZone) {}

  notifyError(){
    this.ngZone.run(() => {
      this.notify.next(true);
    });
  }
}

方案2：使用async管道自动处理变更检测 #

组件中无需手动维护show变量，直接使用Observable配合async管道，管道会自动订阅Observable并触发变更检测：
组件类修改：

export class ErrorsBlockComponent {
  error$ = this.errorsService.cast;

  constructor(private errorsService: ErrorsService) {}
}

模板修改：

<ng-container *ngIf="error$ | async">There is an Error!</ng-container>

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