Angular2 ng-toasty ErrorHandler

Question

グローバルエラーを処理するときに、ErrorHandlerの実装を使用してトーストを公開しようとしています。問題は、トーストが飛び出さないということです。コンソールに表示されているpublishToastメソッドにconsole.logがあり、その他のエラーは表示されません。

コンポーネントに同じpublishToastメソッドを作成した場合、トーストは正常に動作するため、コンポーネントとの分離に関係するようです。

@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 "ゾーン"の外側で実行されるためです。簡単に言えば、AngleはhandleError（）呼び出しの後で変更検出機構を実行しません。 DOMは更新されないので、トーストは表示されません。

通常、ゾーンについて心配する必要はありませんが、ErrorHandlerは例外の1つです。あなたが詳細に興味がある場合

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"); 
     }); 
    } 

は、ゾーンに関するさまざまなブログの記事があります：あなたは明示的にこのようなngZone.runコール内でそれをラップする必要が変更検出をトリガーする必要があるいくつかのコードを実行したい場合。例： https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html