Wo kann ein Angular 2 Service registriert werden, sodass er global genutzt werden kann?

Question

Ich habe einen Service, sagen ServiceA, der eine Menge Server-Kommunikationsarbeit leistet. Dieser Dienst wird von anderen Diensten, einschließlich ServiceB, in der gesamten Anwendung stark genutzt. Gibt es eine Möglichkeit, dass ich es einmal registrieren kann (dh in der App-Komponente), so dass es für alle Dienste verfügbar ist, die in untergeordneten Komponenten registriert sind? Im Moment scheint es, dass ich es neben jedem Service registrieren muss, der es anruft.

Wenn ich ServiceA zum Array viewProviders der AppComponent hinzufügen, erhalte ich eine No provider for ServiceA! Ausnahme, wenn der Injektor versucht, ServiceB in eine untergeordnete Komponente zu injizieren.

AppComponent

@Component({ 
    moduleId: module.id, 
    selector: 'app1', 
    viewProviders: [..., **ServiceA**],<--I WANT TO DO THIS SO ITS AVAILABLE EVERYWHERE 
    templateUrl: 'app.component.html', 
    directives: [...] 
}) 
export class AppComponent {} 

ServiceA

@Injectable() 
export class ServiceA { 
    constructor(http: Http) {} 
} 

ServiceB

@Injectable() 
export class ServiceB { 
    constructor(serviceA: ServiceA) {} 
} 

ChildComponent

@Component({ 
    moduleId: module.id, 
    selector: 'app1', 
    viewProviders: [ServiceB,**ServiceA**], <-AND I DON'T WANT TO HAVE TO DO THIS EVERY TIME 
    templateUrl: 'app.component.html', 
    directives: [...] 
}) 
export class ChildComponent { 
    constructor(private serviceB, ServiceB) {} 
} 

Answer 1

Der beste Weg, einen Service ist das gleiche zu injizieren, wie Sie derzeit tun, außer, dass anstatt sie über die viewProviders in den AppComponent Injektion verwenden, um die Provider-Option. Sie müssen nur die Option providers in die Root-Komponente aufnehmen, aber Sie müssen daran denken, den Service für jede Datei zu importieren und sie in den Konstruktor einzufügen.

@Component({ 
    moduleId: module.id, 
    selector: 'app1', 
    providers: [ServiceA], 
    templateUrl: 'app.component.html', 
    directives: [...] 
}) 
export class AppComponent {}