Angular2 的烤面包错误处理程序

Question

我正在尝试使用 ErrorHandler 的实现来在处理全局错误时发布消息框。问题是吐司永远不会弹出。我在控制台中显示的 publishToast 方法中有一个 console.log，没有出现其他错误。

如果我在组件中创建相同的 publishToast 方法，toast 工作正常，所以它似乎与组件分离有关。

@Injectable()
export class AppErrorHandler implements ErrorHandler {

//---------------------------------------------------------------------//

constructor(private _toastyService: ToastyService) { }

//---------------------------------------------------------------------//

handleError(error: any): void {
    console.log("Error", error)
    alert("Error")
    this.publishToast(error, "An unexpected error occured")
}//handleError

//---------------------------------------------------------------------//

publishToast(error: any, msg?: string) {
    console.log("Publishing Toast")

    let title = "Error " + (error.statusCode ? error.statusCode : '')
    let message = msg ? msg : ''
        + error.body ? error.body : ''

    // Create the instance of ToastOptions 
    var toastOptions: ToastOptions = {
        title: title,
        msg: message,
        showClose: true,
        timeout: 5000,
        theme: 'bootstrap',
        onAdd: (toast: ToastData) => {
        },
        onRemove: function (toast: ToastData) {
        }

    };
    this._toastyService.error(toastOptions);


}//addErrorToast

}//Cls

有什么想法吗？

Answer 1

发生这种情况是因为 handleError() 方法在 Angular "zone" 之外执行。简单来说：Angular 没有运行 handleError() 调用后的变化检测机制。 DOM 未更新，因此 toast 不可见。

通常您不需要担心区域，但 ErrorHandler 是例外之一。如果您想运行一些需要触发更改检测的代码，您需要将其显式包装在 ngZone.run 调用中，如下所示：

import { ErrorHandler, Injectable, NgZone } from "@angular/core";
import { ToastyService } from 'ng2-toasty';

@Injectable()
export class AppErrorHandler implements ErrorHandler {
    constructor(
        private toastyService: ToastyService,
        private ngZone : NgZone) { }

    handleError(error: any): void {
        this.ngZone.run(() => {
            this.publishToast(error, "An unexpected error occured");
        });  
    }

如果您对详细信息感兴趣，可以阅读各种关于区域的博客文章。例如： https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html

Angular2 的烤面包错误处理程序

Angular2 ng-toasty ErrorHandler

angular

toast

custom-error-handling