javascript - ไม่สามารถแสดง material snackbar สำหรับข้อผิดพลาดของ backend โดยใช้ custom ErrorHandler ใน Angular 5

ฉันกำลังพยายามแสดง Snackbar แบบวัสดุสำหรับข้อผิดพลาดของแบ็กเอนด์ในแอป 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);
  }
}

นี่คือตัวอย่าง stackblitz เพื่อแสดงสิ่งที่ฉันหมายถึง

หมายเหตุ :

ฉันพบข้อผิดพลาดนี้ในหลายคำถาม แต่ฉันไม่สามารถแมปคำตอบให้ตรงกับกรณีของฉันได้อย่างแม่นยำ

คำตอบ #1

Angular โหลด ErrorHandler ก่อน providers ซึ่งนี่คือเหตุผลของข้อผิดพลาดเกี่ยวกับการพึ่งพาซ้ำของคุณ

ดังนั้นคุณต้องฉีด MatSnackBar ด้วยตนเอง โดยใช้ Injector ในลักษณะนี้:

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 ของคุณแล้ว ตอนนี้มันทำงานได้แล้ว