无法使用自定义 ErrorHandler Angular 5 显示后端错误的材料小吃栏

Question

我正在尝试为我的 Angular 5 应用程序中的后端错误显示一个材料小吃栏。

我尝试了多种方法，但都没有奏效，似乎 ErrorHandler 类需要一些特殊的方法来正确调用snackbar。

有人可以建议如何处理吗？

我收到此错误：

Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
Evaluating main.ts

我的自定义 ErrorHandler 类是（没有导入）：

@Injectable()
export class MyErrorHandler implements ErrorHandler {

  constructor(public snackBar: MatSnackBar) {}

  handleError(error) {
    const errorMsg = 'an error has happened';
    this.openSnackBar(errorMsg);
    }

  openSnackBar(message: string) {
      this.snackBar.open(message);
  }
}

This is a stackblitz example to show what I mean

注意：

我在多个问题中发现了这个错误，但我无法准确地将答案映射到我的案例

Answer 1

Angular 在提供程序之前加载 ErrorHandler，这就是你关于循环依赖的错误的原因。

因此，您需要使用 Injector 手动注入 MatSnackBar，如下所示：

import { Injectable, Injector } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Injectable()
export class MyErrorHandler implements ErrorHandler {

  private snackbar;
  constructor(private injector: Injector) {}

  handleError(error) {
    this.snackBar = this.injector.get(MatSnackBar);
    const errorMsg = 'an error has happened';
    this.openSnackBar(errorMsg);
  }

  openSnackBar(message: string) {
      this.snackBar.open(message);
  }
}

我已经修改了你的stackblitz，现在可以使用了。