使用Angular 2全局显示http错误

Question

我想为我的应用程序的所有页面显示全局http连接错误消息的弹出窗口.

有什么好办法吗？

Answer 1

我找到了解决方案。

主要思想：将桥接服务与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));
    }
}

应用程序组件.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 = [];
    }
}

应用程序组件.html

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

我们必须在 main.ts 中注册 ApiProvider 才能从依赖注入获得单个实例。

主要.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));