角材料SnackBar和自定义ErrorHandler通知错误

Question

I have an error custom handler class that implements ErrorHandler of Angular 5 core. If an error occours, handleError method have to notify it sending a snackbar material component that show up. If the error is thrown in a test button, all be fine.

If the error occours on the method ngOnInit, the snackbar doesn't work properly and it show up in a position wrong of the page and you can't dismiss it anymore.

IE

My Component:

export class RootPageComponent implements OnInit {

    constructor() {}

    public buttonTest() {
        it.happens;
    }
    ngOnInit() {
        it.happens;
    }
}

This is my custom error handler:

export class ErrorHandlerCustom extends ErrorHandler {

    constructor(...){}
    handleError() {
        const notificationService = this.injector.get(NotificationService);
        // notification custom using snackbar material
        notificationService.exceptionError(error);
    }
}

Results with error in ngOnInit: ngOnInit error

Click on test button: click on test button

Answer 1

I have finally figured out the problem. I don't know if this is the correct way.

In a lot of cases the error handler will run outside of Angular's zone. This causes toasts not to behave correctly since change detection doesn't run on it. So it is necessary to use zone in properly run.

this.zone.run(() => {
        this.snackBar.open(message, "UNDO");
    }

Here I found my solution and I post it just in case someone else encountered the same problem: https://github.com/angular/material2/issues/9875

Answer 2

In my case, The solution was using this.handleError.bind(this) as shown below:

  public post<T>(url: string, data: any, options?: HttpOptions): Observable<T> {
    return this.http.post<T>(this.baseUrl + url, data, options).pipe(
      map((res: T) => {
        return res as T;
      }),
      catchError(this.handleError.bind(this))
    );