注入記錄器是未定義在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（誤差）; >> 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 
    } 
],