angular 2 - 显示任何异常的错误消息

Question

我正在尝试在Angular 2(typescript)中执行以下操作:对于每个错误(特别是来自后端服务器的错误) - 将错误呈现给用户(在UI中) - 在主要组件中(主要是因为我不是想在每个组件中编写相同的代码).

这是一个简单的方法吗？我想我需要的是在主要组件中设置"错误"成员的方法吗？如果我覆盖ExceptionHandler,我该怎么做？

谢谢,帕维尔.

Answer 1

1. 在共享目录中创建NotificationService

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

2. 在共享目录中创建自定义ExceptionHandler(RC 6中的ErrorHandler)

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

3. 更新AppModule以覆盖默认错误处理程序

   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 { }
   

4. 最后在AppComponent中:

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