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未更新，因此吐司不可见。

通常您不需要担心区域，但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 ng-toasty ErrorHandler

1 个答案: