javascript - Angular 5 material snackbar vises ikke riktig for egendefinert ErrorHandling, ellers fungerer det fint

Angular 5-material, material snackbar vises ikke riktig kun for tilpasset ErrorHandling, ellers fungerer det fint:

Jeg prøver å vise mine backend-feil ved å bruke material snackbar, problemet er at første gang den utløses, vises den på feil sted (ikke nederst i midten som den burde, men oppe til venstre) og den blir der for alltid uten å forsvinne (den burde automatisk forsvinne etter 2 sekunder i henhold til min konfigurasjon)

For de neste gangene det vises, vil det vises riktig og forsvinne etter 2 sekunder.

Vennligst prøv problemet her: stackblitz-eksempel som viser mitt problem.

Stackblitz-koden er her

Takk

Svar #1

Det tok meg evigheter å finne svaret, jeg er ikke helt sikker på hvorfor det fungerer slik, men det fungerer, så jeg håper det hjelper noen andre.

Vi må bruke noe som heter NgZone når vi kaller material-snackbar i ErrorHandler (jeg tror det er på grunn av at ErrorHandler blir kalt på en spesiell måte i Angular)

Så koden som kaller snackbar bør være:

constructor(private matSnackBar: MatSnackBar, private zone: NgZone, private dataService: DataService) { }
notify (message: string) {
    this.zone.run(() => {
      this.matSnackBar.open(message, '' , {
        duration: 2000
      });
    });
  }

Oppdatert Stackblitz som nå fungerer

Relaterte artikler