Angular 5自定义ErrorHandler+SnackBar：ngOnInit报错时组件异常

这个问题我之前也碰到过！核心原因是Angular的ErrorHandler在捕获ngOnInit这类早期生命周期钩子的错误时，可能会跑出NgZone之外，导致Material SnackBar无法正确绑定DOM上下文——毕竟此时组件还处于初始化阶段，DOM元素可能还没完全就绪，SnackBar的定位逻辑自然就乱了，甚至连关闭事件都无法正常触发。

下面是具体的解决方案，分两步走：

1. 确保SnackBar操作在NgZone内执行 #

Angular的变更检测和大多数UI操作都依赖NgZone，当ErrorHandler捕获错误时，有时候会跳出这个上下文。我们需要把SnackBar的调用包裹在NgZone的run方法里，强制让它回到Angular的上下文环境中。

修改你的自定义ErrorHandler类：

import { ErrorHandler, Injectable, NgZone } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  constructor(
    private snackBar: MatSnackBar,
    private ngZone: NgZone // 注入NgZone
  ) {
    super();
  }

  handleError(error: any): void {
    // 用ngZone.run包裹SnackBar操作
    this.ngZone.run(() => {
      this.snackBar.open(error.message || '未知错误', '关闭', {
        duration: 3000,
        verticalPosition: 'top', // 可选：指定固定位置，避免定位异常
        horizontalPosition: 'end'
      });
    });
    // 不要忘记调用父类的错误处理逻辑
    super.handleError(error);
  }
}

2. 确保SnackBar有正确的容器上下文（可选但推荐） #

如果第一步还没解决问题，可能是ngOnInit执行时根组件的DOM还没完全渲染，SnackBar找不到默认的挂载容器。这时候可以在根组件中指定一个明确的容器：

首先在根组件（比如AppComponent）中暴露ViewContainerRef：

import { Component, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  // 把ViewContainerRef暴露给外部
  constructor(public viewContainerRef: ViewContainerRef) {}
}

然后在ErrorHandler中注入根组件的ViewContainerRef，并传给SnackBar：

import { ErrorHandler, Injectable, NgZone, Injector } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { AppComponent } from './app.component';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  private snackBar: MatSnackBar;
  private ngZone: NgZone;
  private appComponent: AppComponent;

  constructor(private injector: Injector) {
    super();
    // 延迟注入避免循环依赖问题
    setTimeout(() => {
      this.snackBar = injector.get(MatSnackBar);
      this.ngZone = injector.get(NgZone);
      this.appComponent = injector.get(AppComponent);
    });
  }

  handleError(error: any): void {
    this.ngZone.run(() => {
      this.snackBar.open(error.message || '未知错误', '关闭', {
        duration: 3000,
        verticalPosition: 'top',
        horizontalPosition: 'end',
        // 指定根组件的ViewContainerRef作为容器
        viewContainerRef: this.appComponent.viewContainerRef
      });
    });
    super.handleError(error);
  }
}

最后别忘了在AppModule中注册你的自定义ErrorHandler，替换默认的：

import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './custom-error-handler';

@NgModule({
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ]
})
export class AppModule { }

这样修改后，不管是按钮触发的错误还是ngOnInit里的错误，SnackBar都能正常显示和关闭了。

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