Angular2 - 注入サービスは利用できません

Question

私のangle2アプリケーションには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; 
    } 
} 

は、今私がしたいこれらのサービスは、私のmain.ts

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

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

にブートストラップしようとしている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); 
    } 
} 

と呼ばれます私のヘッダーコンポーネントにこのエラーを表示します。だから、エラーが発生してこのエラーは私のヘッダー内の区切られたボックスに表示されます。

問題はHttpClient.handleErrorで呼び出されたErrorService.setError(error)メソッドが起動されなくなることです。

Answer 1

.catch(this.handleError); 

は(e)はまた、あなたが

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