Übergeben Sie globalen Dienst an untergeordnete Klassen in Angular 2

Question

Ich habe die Hauptkomponente, die über 2 untergeordnete Komponenten und einen Dienst verfügt. Ich mache bootstrap(Main, [MyService]), aber ich möchte die Funktionalität (Möglichkeit, Service-Funktionen aufrufen) von diesen beiden untergeordneten Komponenten haben. Wie sollte ich eine Instanz dieses Dienstes von der übergeordneten Komponente an meine untergeordneten Komponenten übergeben?

Answer 1

Geben Sie nicht den Anbieter des Dienstes in der Komponente an, sondern fügen Sie ihn nur in den Konstruktor ein.

Wenn Sie den Dienst im Bootstrap bereitstellen und möchten, dass es ein Singleton ist, wird Ihre Komponente wie folgt aussehen.

@Component({ 
 
    template: '<child-component></child-component>', 
 
    directives: [ChildComponent], 
 
    providers: [] // no need to include the specify the service here 
 
}) 
 

 
export class MyComponent { 
 
    /*even though you're injecting the service here, it will use the same 
 
    instance provided in the bootstrap */ 
 

 
    constructor(private myService: MyService) { 
 
    
 
    } 
 
}

@Component({ 
 
    selector: 'child-component', 
 
    providers: [] // no need to include the specify the service here 
 
}) 
 

 
export class ChildComponent { 
 
    //you can do this as long as you don't specify the service in the providers list 
 
    constructor(private myService: MyService) { 
 
    } 
 
}