Angular Material SnackBar 和自定义 ErrorHandler 来通知错误

Question

我有一个错误自定义处理程序 class，它实现了 Angular 5 核心的 ErrorHandler。如果发生错误，handleError 方法必须通知它发送出现的 snackbar material 组件。如果在测试按钮中抛出错误，一切都很好。

如果错误发生在 ngOnInit 方法上，则 snackbar 无法正常工作，并且显示在页面错误的位置，您无法再将其关闭。

I.E.

我的组件：

export class RootPageComponent implements OnInit {

    constructor() {}

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

这是我的自定义错误处理程序：

export class ErrorHandlerCustom extends ErrorHandler {

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

ngOnInit 中的错误结果： ngOnInit error

点击测试按钮： click on test button

Answer 1

我终于找到问题了。不知道这个方法对不对

在很多情况下，错误处理程序会运行在 Angular 的区域之外。这会导致 toasts 无法正常运行，因为更改检测不会运行对其进行处理。所以在运行.

中正确使用 zone 是很有必要的


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

在这里我找到了我的解决方案，我 post 以防万一其他人遇到同样的问题： https://github.com/angular/material2/issues/9875

Answer 2

在我的例子中，解决方案是使用 this.handleError.bind(this)，如下所示：

  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))
    );

Angular Material SnackBar 和自定义 ErrorHandler 来通知错误

Angular Material SnackBar and custom ErrorHandler to notify error

error-handling

angular-material

snackbar

angular