Angular2 ng-toasty ErrorHandler

Question

当我处理全局错误时,我正在尝试使用ErrorHandler的实现来发布toast.问题是烤面包永远不会弹出.我在控制台中显示的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"之外执行.简单地说:在handleError()调用之后,Angular不会运行更改检测机制.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