Angular 5自定义错误处理器问题：触发错误后前端未更新

你的问题核心在于组件没有监听错误处理器服务中状态的变化——ErrorMessageComponent只是在构造函数里一次性获取了customErrorHandler.isVisible的初始值，之后服务里的isVisible和message更新时，组件完全不知道，自然不会触发页面更新。另外你的CustomErrorHandler里还有一段冗余的visibilityChange订阅代码，完全没必要留着。

下面是具体的修复步骤：

1. 修正CustomErrorHandler服务 #

我们需要让服务通过Subject主动通知组件状态变化，同时去掉冗余代码：

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

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  message: string = "";
  isVisible: boolean = false;
  // 用一个Subject来传递错误状态（包含可见性和消息）
  errorState$: Subject<{ isVisible: boolean; message: string }> = new Subject();

  handleError(error: any) {
    console.error(error);
    this.message = "ERROR: " + error.toString();
    this.isVisible = true;
    // 发送最新的错误状态给订阅者
    this.errorState$.next({
      isVisible: this.isVisible,
      message: this.message
    });
  }
}

2. 修改ErrorMessageComponent监听状态变化 #

组件需要订阅服务的errorState$，实时更新自身的isVisible和message，同时记得在组件销毁时取消订阅，防止内存泄漏：

import {Component, OnDestroy, OnInit} from '@angular/core';
import {CustomErrorHandler} from "../../../services/error-handler.service";
import {Subscription} from "rxjs/Subscription";

@Component({
  selector: 'app-error-message',
  templateUrl: './error-message.html',
})
export class ErrorMessageComponent implements OnInit, OnDestroy {
  public message: string = "";
  public isVisible: boolean = false;
  private errorSubscription: Subscription | undefined;

  constructor(private customErrorHandler: CustomErrorHandler) {}

  ngOnInit() {
    // 订阅服务的错误状态流
    this.errorSubscription = this.customErrorHandler.errorState$.subscribe(state => {
      this.isVisible = state.isVisible;
      this.message = state.message;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.errorSubscription) {
      this.errorSubscription.unsubscribe();
    }
  }
}

3. 可选：添加手动关闭错误提示的功能 #

如果需要让用户可以手动关闭错误提示，可以在组件模板和逻辑里添加关闭功能：

<!-- error-handler.html -->
<div class="alert alert-danger" id="app-error" *ngIf="isVisible">
  {{message}}
  <button type="button" class="close" (click)="closeError()">
    &times;
  </button>
</div>

然后在组件里添加对应方法：

closeError() {
  this.isVisible = false;
  // 可选：同步服务的状态
  this.customErrorHandler.isVisible = false;
}

另外还要注意你的app.module.ts里的提供者配置，其实只需要注册一次CustomErrorHandler作为ErrorHandler的替代即可，重复注册可能导致多个实例，所以可以把单独的CustomErrorHandler从providers里去掉：

providers: [
  UserService,
  { provide: ErrorHandler, useClass: CustomErrorHandler }
  // 移除这里单独的CustomErrorHandler注册
],

这样修改后，当错误触发时，服务会通过Subject通知组件更新状态，页面就能同步显示错误消息啦～

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