Angular字符串变量无法绑定模板：HTTP错误视图不显示问题

问题描述 #

我开发的Angular应用集成了HttpInterceptor和ErrorHandler，流程为：HttpInterceptor拦截HTTP错误后抛出，交由ErrorHandler处理，ErrorHandler通过Subject推送错误消息，AppComponent订阅该Subject，期望在视图中展示错误内容。

调用不存在的URL触发404错误时，控制台能打印各环节的错误日志，AppComponent也能收到错误消息，但视图绑定的errorMessage变量始终显示'none'，未更新为实际错误消息。

相关代码 #

HttpInterceptor

@Injectable({providedIn: "root"})
export class GlobalHttpInterceptorService implements HttpInterceptor {

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((err) => {
        console.log("Error in GlobalHttpInterceptorService");
        return throwError(err);
      }),
    );
  }
}

ErrorHandler

@Injectable({providedIn: "root"})
export class GlobalErrorHandlerService implements ErrorHandler {

  public subject = new Subject<string>();

  handleError(error: any) {
    console.log('Error in GlobalErrorHandlerService');
    this.subject.next(error.message)
  }
}

AppComponent（含模板）

@Component({
  selector: 'my-app',
  template: 'The error: {{ errorMessage }}',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'test';
  errorMessage: string = 'none';

  constructor(
    private service: Service,
    private errorHandlerService: GlobalErrorHandlerService
  ) {
    this.errorHandlerService.subject.subscribe((message) => {
      console.log('Error in AppComponent: ' + message);
      this.errorMessage = message;
    });

    // 调用不存在的URL触发404错误
    this.service.getNonExistentUrl().subscribe(() => console.log('bla'));
  }
}

原因分析 #

Angular的ErrorHandler处理未捕获错误时，是在Angular变更检测上下文之外执行的。这意味着当GlobalErrorHandlerService的handleError方法调用subject.next()时，AppComponent订阅回调里更新errorMessage的操作不会触发Angular的变更检测，导致视图无法同步更新。

解决方案 #

方案1：用NgZone包裹Subject推送操作 #

修改GlobalErrorHandlerService，注入NgZone，将subject.next()包裹在zone.run()中，强制进入Angular变更检测周期：

import { Injectable, ErrorHandler, NgZone } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({providedIn: "root"})
export class GlobalErrorHandlerService implements ErrorHandler {

  public subject = new Subject<string>();

  constructor(private ngZone: NgZone) {}

  handleError(error: any) {
    console.log('Error in GlobalErrorHandlerService');
    this.ngZone.run(() => {
      this.subject.next(error.message);
    });
  }
}

方案2：使用AsyncPipe直接订阅Subject #

修改AppComponent，将errorMessage改为Observable，模板用AsyncPipe让Angular自动处理变更检测：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { Service } from './service';
import { GlobalErrorHandlerService } from './global-error-handler.service';

@Component({
  selector: 'my-app',
  template: 'The error: {{ errorMessage$ | async }}',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'test';
  errorMessage$: Observable<string>;

  constructor(
    private service: Service,
    private errorHandlerService: GlobalErrorHandlerService
  ) {
    this.errorMessage$ = this.errorHandlerService.subject.pipe(
      startWith('none') // 设置初始值
    );

    this.service.getNonExistentUrl().subscribe(() => console.log('bla'));
  }
}

方案3：手动触发变更检测 #

在AppComponent中注入ChangeDetectorRef，订阅回调更新errorMessage后手动标记变更：

import { Component, ChangeDetectorRef } from '@angular/core';
import { Service } from './service';
import { GlobalErrorHandlerService } from './global-error-handler.service';

@Component({
  selector: 'my-app',
  template: 'The error: {{ errorMessage }}',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'test';
  errorMessage: string = 'none';

  constructor(
    private service: Service,
    private errorHandlerService: GlobalErrorHandlerService,
    private cdr: ChangeDetectorRef
  ) {
    this.errorHandlerService.subject.subscribe((message) => {
      console.log('Error in AppComponent: ' + message);
      this.errorMessage = message;
      this.cdr.markForCheck(); // 手动触发变更检测
    });

    this.service.getNonExistentUrl().subscribe(() => console.log('bla'));
  }
}

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