Angular2 injizierte individueller Service ist nicht definiert

Question

Ich versuche, einen benutzerdefinierten Dienst (MessageService) in einer anderen benutzerdefinierten Service (ItemService) zu injizieren. Es wirft einen Fehler MessageService in ItemService undefied wird.
Aber beide Dienste (MessageService und ItemService) funktionieren gut mit Komponenten.

mani.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule); 

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
import { routing, routedComponents } from './app.routing'; 
import { ItemService } from './services/item.service'; 
import { MessageService } from './services/message.service'; 
import './rxjs-extensions'; 


@NgModule({ 
    imports:  
    [ BrowserModule, 
    routing, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule, 

    ], 
    declarations: [ AppComponent, routedComponents], 
    providers: [ 
    MessageService,ItemService 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

message.service.ts

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
import { Message } from '../models/message'; 

@Injectable() 
export class MessageService { 
    constructor() { } 

    showError(msg: string) { 
     console.log('MessageService Alert::'+msg); 
    } 

} 

item.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Item } from '../models/item'; 
import { MessageService } from '../services/message.service' 
import { Observable } from 'rxjs'; 

@Injectable() 
export class ItemService { 
private restUrl = 'http://localhost:3000/'; // URL to web api 

    constructor(
    private http: Http, 
    private msgService: MessageService) { } 

    getAllItems(): Observable<Item[]> { 
    return this.http 
     .get(this.restUrl+'items') 
     .map((res: Response) => res.json() as Item[]) 
     .catch(this.handleError); 
    } 

    private handleError(error: any): Promise<any> { 
    console.error('An error occurred', error); 
    let errorMsg = error.message || error; 
    this.msgService.showError("errorMsg"); // msgService is undefined here. 
    return Promise.reject(errorMsg); 
    } 

} 

hier die msgService in ItemService undefiniert. kann mir jemand helfen, dies zu lösen?

Answer 1

Das Problem ist this. nicht ItemService

.catch(this.handleError); 

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

für this. sein sollte handleError() innen zeigt auf die aktuelle Instanz der Klasse zu halten