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

时间:2018-03-25 10:27:06

标签: angular error-handling angular-material snackbar

我有一个错误自定义处理程序类,它实现了Angular 5核心的ErrorHandler。如果出现错误,handleError方法必须通知它发送显示的快餐栏材料组件。 如果在测试按钮中抛出错误,一切都会好的。

如果ngOnInit方法出现错误,则小吃栏无法正常工作,并且它显示在页面的错误位置,您无法再将其解除。

我的组件:

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

2 个答案:

答案 0 :(得分:2)

我终于找到了问题所在。我不知道这是否正确。

在很多情况下,错误处理程序将在Angular的区域之外运行。由于更改检测不会在其上运行,因此这会导致toast无法正常运行。所以有必要在正确运行中使用区域。


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

在这里,我找到了我的解决方案并发布,以防其他人遇到同样的问题: https://github.com/angular/material2/issues/9875

答案 1 :(得分:0)

就我而言,解决方案使用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))
    );