http - 注入(inject)的记录器在 angular2 的自定义 Http 中未定义

Question

我正在尝试实现一个全局处理程序来管理 Angular2 中的 HTTP 错误。通过一些引用资料:http://restlet.com/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/和 https://blog.tomasandtomas.com/angular-2-http-interceptors-7e2d74b7f14e#.nxgxijnqu ，我做了以下内容:

--------------------------------------------------------------------
// Logger service - which will be able to send the error to server or log to console
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import { Response } from '@angular/http';

@Injectable()
export class ErrorLogService {
    public logError(error: any): void {
       // custom error handling here
       console.log(error);
    }
}
--------------------------------------------------------------------
// This is the Custom HTTP that extends Http module
import { Injectable } from '@angular/core';
import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs } from '@angular/http';
import { ErrorLogService } from '../ErrorHandling/error.log.service';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class CustomHttp extends Http {    

    constructor(_backEnd: ConnectionBackend,
        defaultOptions: RequestOptions, private errorLogService: ErrorLogService) {
        super(_backEnd, defaultOptions);        
    }    
    get(url: string, options?: RequestOptionsArgs): Observable<any> {
        return super.request(url, options)
        .catch((error: any): any => {
            this.errorLogService.logError(error);
            return Observable.empty();
        })            
        .finally(() => {
            console.log('Done');
        });
    }    
}

--------------------------------------------------------------------
// This is the service that call the api to get data.
import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { IAsset } from './asset';
import { AppSettings } from '../app.settings';


import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AssetService {
    private _cid = 1234;
    private _total = 774;
    private _pageIndex = 1;

    constructor(private _http: Http) { }

    getAssets(pageIndex: number): Promise<IAsset[]> {
        this._pageIndex = pageIndex;
        let _assetApi = `${AppSettings.GET_CONFIG('assets')}?1cid=${this._cid}&count=${this._total}&index=${this._pageIndex}`;


        return this._http.get(_assetApi)
            .toPromise()
            .then(response => response.json() as IAsset[]);

    }    
}

--------------------------------------------------------------------
//This is how custom Http is injected in the app module
    import { NgModule, APP_INITIALIZER, ErrorHandler } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpModule } from '@angular/http';
    import { Http, XHRBackend, RequestOptions } from '@angular/http';

    import { AppComponent } from './app.component';
    import { WelcomeComponent } from './home/welcome.component';
    import { ProductModule } from './products/product.module';

    import { AppRoutingModule } from './app.routing.module';
    import { ErrorLogService } from './shared/ErrorHandling/error.log.service';
    import { CustomHttp } from './shared/Http/custom.http.service';

    @NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        AppRoutingModule,
        ProductModule
    ],
    declarations: [
        AppComponent,
        WelcomeComponent
    ],
    providers: [
        ConfigService,
        AuthService,    
        ErrorLogService,
        {
        provide: Http,
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, _errorLogService: ErrorLogService) => {
            return new CustomHttp(backend, defaultOptions, _errorLogService);
        },
        deps: [XHRBackend, RequestOptions]
        }
    ],
    bootstrap: [AppComponent],

    })
    export class AppModule { }

现在的问题是，每当我的数据服务出现 500 内部服务器错误时，它都会被 CustomHttp 捕获，但是 this.errorLogService.logError(error); >> errorLogService 是未定义的，不会对其调用 logError。

我正在使用 Angular 2.0.0.0。

关于这个问题有什么建议吗？ - 谢谢。

Answer 1

您需要将ErrorLogService 添加到CustomHttp 的提供程序deps:

providers: [
    ConfigService,
    AuthService,    
    ErrorLogService,
    {
    provide: Http,
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, _errorLogService: ErrorLogService) => {
        return new CustomHttp(backend, defaultOptions, _errorLogService);
    },
    deps: [XHRBackend, RequestOptions, ErrorLogService] <-- this
    }
],