Angular2 - 注入服務不可用

Question

我在我的angular2應用程序中有一項服務，名爲HttpClient此服務應該爲應用程序發送給我的端點的每個請求添加一個授權標頭。

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

import { Router } from '@angular/router'; 

import { ErrorService } from '../../services/error/error.service' 

@Injectable() 
export class HttpClient { 

    private token: string; 
    private error: any; 

    private webApi = 'http://localhost:8080/api/v1/'; // Url to web api 

    constructor(
     private http: Http, 
     private router: Router, 
     private errorService: ErrorService) { } 

    get(url: string): Promise<Response> { 
     return this.http.get(this.webApi + url, this.createAuthorizationHeader()) 
        .toPromise() 
        .catch((e) => this.handleError(e)); 
    } 

    post(url: string, data: any): Promise<Response> { 
     return this.http.post(this.webApi + url, JSON.stringify(data), this.createAuthorizationHeader()) 
        .toPromise() 
        .catch((e) => this.handleError(e)); 
    } 

    put(url: string): Promise<Response> { 
     return this.http.get(this.webApi + url, this.createAuthorizationHeader()) 
        .toPromise() 
        .catch((e) => this.handleError(e)); 
    } 

    delete(url: string): Promise<Response> { 
     return this.http.delete(this.webApi + url, this.createAuthorizationHeader()) 
        .toPromise() 
        .catch((e) => this.handleError(e)); 
    } 

    private handleError (error: any) { 

     var status: number = error.status; 

     if (status == 415) { 
      this.errorService.setError(error); 
     } 

     let errMsg = (error.message) 
      ? error.message 
      : status 
       ? `${status} - ${error.statusText}` 
       : 'Server error'; 

     console.error(errMsg); // log to console instead 
     return Promise.reject(errMsg); 
    } 

    private createAuthorizationHeader() { 

     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     headers.append('Accept', 'application/json'); 

     if (localStorage.getItem('token')) 
      this.token = localStorage.getItem('token'); 

     headers.append('Authorization', 'Bearer ' + this.token); 

     return headers; 
    } 
} 

而且這個服務被設置錯誤另一定製服務稱爲ErrorService

import { Injectable, EventEmitter } from '@angular/core'; 

@Injectable() 
export class ErrorService { 

    error: any; 

    public errorAdded$: EventEmitter<any>; 

    constructor() { 
     this.errorAdded$ = new EventEmitter(); 
    } 

    getError(): any { 
     return this.error; 
    } 

    setError(error: any) { 
     alert('is not going to be called'); 
     this.error.error = error; 
     this.errorAdded$.emit(error); 
    } 
} 

這些服務將要在我的main.ts到自舉

... 
import { ErrorService } from './services/error/error.service'; 
import { HttpClient } from './services/http/http.service'; 
... 

bootstrap(AppComponent, [ 
    appRouterProviders, 
    HTTP_PROVIDERS, 
    ErrorService, 
    HttpClient, 
    .... 
]); 

現在我想在我的標題組件中顯示此錯誤。所以加班時發生了一個錯誤，這個錯誤將顯示在我的標題中的分隔框中。

問題是我的ErrorService.setError(error)在HttpClient.handleError中調用的方法不會被解僱。

Answer 1

.catch(this.handleError); 

應該

.catch((e) => this.handleError(e)); 

保留的this. 範圍，其中(e)是參數列表

或者您可以使用

.catch(this.handleError.bind(this));