首页 文章

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

提问于
浏览
1

我试图在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

注意:

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

1 回答

  • 2

    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,现在它可以了 .

相关问题