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));