angle 2 - 例外のエラーメッセージを表示します。

Question

私はAngular 2（typescript）で次のことをしようとしています：各エラー（特にバックエンドサーバーからのエラー） - ユーザーに（UIの） - 主なコンポーネント（主に私は各コンポーネントに同じコードを書いてはいけないので）。

これは簡単な方法ですか？私は必要なのは、メインコンポーネントに "エラー"メンバーを設定する方法だと思いますか？ ExceptionHandlerをオーバーライドするとどうすればいいですか？

thanx、 Pavel。

Answer 1

1. import { ErrorHandler, Inject } from '@angular/core'; 
   import { NotificationService } from './notification.service'; 
   
   
   export class CustomErrorHandler implements ErrorHandler { 
   
       constructor(@Inject(NotificationService) private notificationService: NotificationService) { 
       } 
   
       handleError(error: any): void { 
        this.showErrorInConsole(error); 
        setTimeout(() => 
         this.notificationService.error(error.json().Message), 1); 
       } 
   
       private showErrorInConsole(error: any) :void { 
        if (console && console.group && console.error) { 
         console.group("Error Log"); 
         console.error(error); 
         console.error(error.message); 
         console.error(error.stack); 
         console.groupEnd(); 
        } 
       } 
   } 
   

2. 共有ディレクトリにデフォルトエラーハンドラ
   をオーバーライドする更新AppModuleをカスタムexceptionHandlerの（RC 6でのErrorHandler）を作成して共有ディレクトリに

   import { Injectable } from '@angular/core'; 
   import { Message } from 'primeng/primeng'; 
   
   @Injectable() 
   export class NotificationService { 
       message: Message[]; 
   
       constructor() { 
        this.message = []; 
       } 
   
       success(detail: string, summary?: string): void { 
        this.message.push({ 
         severity: 'success', summary: summary, detail: detail 
        }); 
       } 
   
       info(detail: string, summary?: string): void { 
        this.message.push({ 
         severity: 'info', summary: summary, detail: detail 
        }); 
       } 
   
       warning(detail: string, summary?: string): void { 
        this.message.push({ 
         severity: 'warn', summary: summary, detail: detail 
        }); 
       } 
   
       error(detail: string, summary?: string): void { 
        this.message.push({ 
         severity: 'error', summary: summary, detail: detail 
        }); 
       } 
   } 
   

3. をNotificationServiceを作成します。

   import { GrowlModule } from 'primeng/primeng'; 
   ... 
   import { NotificationService } from './shared/notification.service'; 
   import { CustomErrorHandler } from './shared/custom-error-handler'; 
   
   @NgModule({ 
       imports: [ 
        ..., 
        GrowlModule // prime ng notification 
       ], 
       declarations: [ 
        ... 
       ], 
       providers: [ 
        ..., 
        NotificationService, // added 
        { provide: ErrorHandler, useClass: CustomErrorHandler } // overrride default error handler 
       ], 
       bootstrap: [AppComponent] 
   }) 
   export class AppModule { } 
   

AppComponentでようやく

4. ：

   import { Component } from '@angular/core'; 
   import { Message } from 'primeng/primeng'; 
   import { NotificationService } from './shared/notification.service'; 
   
   
   @Component({ 
       selector: 'my-app', 
       template: ` 
        <p-growl [value]="getMessages()"></p-growl> 
       ` 
   }) 
   export class AppComponent{ 
       constructor(private notification: NotificationService) { 
       } 
   
       getMessages(): Message[] { 
        return this.notification.message; 
       } 
   }