Visualizza errori HTTP globalmente con Angular 2

Question

Desidero visualizzare la finestra popup con il messaggio di errore della connessione http a livello globale per tutte le pagine della mia applicazione.

Qualsiasi buon modo per farlo?

Answer 1

Ho trovato la soluzione.

L'idea principale: utilizzare il servizio bridge con EventEmitter.

api.provider.ts

import { Injectable, Output, EventEmitter } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 

@Injectable() 
export class ApiProvider { 
    private _host: string; 

    @Output() errorHandled$ = new EventEmitter(); 

    constructor(private _http: Http) { 
     this._host = "http://localhost:5000";   
    } 

    private errorHandler(response: Response): any {   
     if (response.status == 0) 
     {    
      this.errorHandled$.emit({ 
       value: "ERR_CONNECTION_REFUSED" 
      }); 
     } 
     return null; 
    } 

    get(path: string): Promise<any> { 
     var headers = new Headers(); 

     return this._http.get(this._host + path, { headers: headers }) 
      .toPromise() 
      .then(response => {       
       return response.json(); 
      }) 
      .catch((response: Response) => this.errorHandler(response)); 
    } 

    post(path: string, body: string): Promise<any> { 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

     return this._http.post(this._host + path, body, { headers: headers }) 
      .toPromise() 
      .then((response: Response) => { 
       return response.json(); 
      }) 
      .catch((response: Response) => this.errorHandler(response)); 
    } 
} 

app.component.ts

import 'rxjs/Rx'; 
import { Component } from '@angular/core'; 

import { ApiProvider } from './providers/api.provider'; 

@Component({ 
    selector: 'mii-app', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent {  
    globalErrors: string[]; 

    constructor(private _api: ApiProvider) { 
     this.globalErrors = []; 

     _api.errorHandled$.subscribe(value => { console.log('subscribe'); this.globalErrors.push('error connection.')});   
    } 

    clearErrors(): void 
    { 
     this.globalErrors = []; 
    } 
} 

app.component.html

<div *ngIf="globalErrors.length > 0" class="alert alert-danger fade in"> 
    <a (click)="clearErrors()" class="close" aria-label="close">&times;</a> 
    error... 
</div> 

Dobbiamo registrare il nostro ApiProvider in main.ts avere una singola istanza dall'iniezione di dipendenza.

main.ts

/// <reference path="../../typings/globals/core-js/index.d.ts" /> 

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { HTTP_PROVIDERS } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { ApiProvider } from './providers/api.provider'; 

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    ApiProvider 
]) 
.catch(err => console.error(err)); 

Answer 2

È possibile creare un elenco personalizzato dei componenti e la dimostrazione di errori nella finestra popup includendo questo componente personalizzato. Per esempio si può fare questo

@Component({ 
    selector: 'list-errors', 
    template: `<ul class="error-messages" *ngIf="errorList"> 
     <li *ngFor="let error of errorList"> 
      {{ error }} 
     </li> </ul>` 
    }) 
export class ListErrorsComponent { 
    formattedErrors: Array<string> = []; 

     @Input() 
     set errors(errorList: Errors) { 
     this.formattedErrors = []; 

     if (errorList.errors) { 
      for (let field in errorList.errors) { 
      this.formattedErrors.push(`${field} ${errorList.errors[field]}`); 
      } 
     } 
     }; 

     get errorList() { return this.formattedErrors; } 
     } 

Utilizzare questo nella finestra pop-up in cui si desidera visualizzare l'elenco degli errori

<list-errors [errors]="errors"></list-errors> 

creare un modello di errore in quanto tale

export class Errors { 
    errors: {[key:string]: string} = {}; 
    } 

impostare un valore dell'oggetto error e passare questo oggetto errore al componente list-error

errors: Errors = //assign your errors to this variable