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

Question

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

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

即:

我的组件:

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 区域之外运行。这会导致 toast 行为不正确，因为更改检测不会在其上运行。因此，正确运行时使用zone是非常有必要的。

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

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