Передача глобального обслуживания дочерним классам в Angular 2

Question

У меня есть основной компонент, который имеет 2 дочерних компонента и службу. Я делаю bootstrap(Main, [MyService]), однако я хочу иметь функциональность (возможность вызова сервисных функций) из этих обоих дочерних компонентов. Как передать один экземпляр этой службы из родительского компонента в мои дочерние компоненты?

Answer 1

Не указывайте поставщика услуг в компоненте, просто включите его в конструктор.

Если вы предоставляете услугу в бутстрапе и хотите, чтобы это был синглтон, ваш компонент будет выглядеть так.

@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) { 
 
    } 
 
}