Angular 2 angular2.dev.js: 23925 AUSNAHME: Fehler: Uncaught (in Versprechung): Kein Provider für

Question

Ich versuche, einen Angular Service (DataService) zu laden, der eine Konfigurationsdatei (datService.configuration) in einer Komponente hat (Zuhause). In meiner Heimat Komponente, wenn ich an die Anbieter-Liste nicht DataServiceConfiguration hinzufügen, bekomme ich folgende Fehlermeldung:

"Uncaught (in Versprechen): Kein Anbieter für DataServiceConfiguration (Home -> Dataservice -> DataServiceConfiguration)"

dataService.ts:

import { Injectable } from 'angular2/core'; 
import { Http, Response, Headers, HTTP_PROVIDERS } from 'angular2/http'; 
import 'rxjs/add/operator/map' 
import { Observable } from 'rxjs/Observable'; 
import { DataServiceConfiguration } from './dataService.configuration'; 

@Injectable() 
export class DataService { 

    private actionUrl: string; 
    private headers: Headers; 

    constructor(private _http: Http, private configuration: DataServiceConfiguration) { 

     ... 
    } 

dataService.configuration.ts:

import { Injectable } from 'angular2/core'; 

@Injectable() 
export class DataServiceConfiguration { 
    public Server: string = "http://localhost/"; 
    public ApiPath: string = "api/v1/"; 
    public ApiUrl = this.Server + this.ApiPath; 

    constructor() { 
    } 
} 

Home.ts

import { DataService } from '../services/dataService'; 
import { DataServiceConfiguration } from '../services/dataService.configuration'; 

import { 
    Headers, 
    Http, 
    HTTP_BINDINGS, 
    Request, 
    RequestOptions, 
    RequestOptionsArgs, 
    HTTP_PROVIDERS 
} from 'angular2/http'; 

@ng.Component({ 
    selector: 'home', 
    templateUrl: './ng-app/components/public/home/home.html', 
    directives: [AlbumTile, ProdutoTile, Promocao, SuperOfertas, Banner, Categorias, DestaquesDaHome], 
    providers: [DataServiceConfiguration, DataService] 
}) 
export class Home implements ng.OnInit { 
    public lista: models.Lista; 
    public pagina: number = 1; 
    paginas: number = 1; 

    constructor(private http: Http, private _dataService: DataService) { 

    } 
} 

Ich verstehe nicht, warum ich DataServiceConfiguration meiner Hauptkomponente hinzufügen müssen, wie meine Data es bereits geladen wird. Gibt es eine Möglichkeit, den DataService nur zu meiner Komponente hinzuzufügen?

Answer 1

Es ist ein bisschen seltsam, aber nur Komponenten können Abhängigkeitsinjektion in Angular konfigurieren (und bootstrap(), aber das ist im Wesentlichen das gleiche wie die Root-Komponente). D. h., Nur Komponenten können Anbieter angeben.

Jede Komponente in der Komponentenstruktur erhält einen zugeordneten "Injektor", wenn die Komponente ein providers Array angegeben hat. Wir können uns das wie einen Injektorbaum vorstellen, der (normalerweise) viel spärlicher ist als der Komponentenbaum. Wenn eine Abhängigkeit aufgelöst werden muss (durch eine Komponente ODER einen Dienst), wird dieser Injektorbaum konsultiert. Der erste Injektor, der die Abhängigkeit erfüllen kann, tut dies. Der Injektorbaum wird nach oben zur Wurzelkomponente/Injektor hin bewegt.

Damit Ihr Dienst eine Abhängigkeit vom Konfigurationsobjekt injizieren kann, muss dieses Konfigurationsobjekt zuerst bei einem Injektor registriert werden. In dem Array einer providers Komponente. Diese Registrierung muss irgendwo an oder über der Komponente erfolgen, an der Sie Ihren Dienst nutzen/injizieren möchten.

Ihr Dienst sollte dann in der Lage sein, das registrierte Konfigurationsobjekt zu injizieren, da es in der Injektorstruktur gefunden wird.

Siehe auch Angular 2 - Including a provider in a service.