Angular2: ¿Necesito agregar un proveedor en el componente para la dependencia de un servicio?

Estoy teniendo algunos problemas para entender la lógica que Angular2 utiliza en lo que respecta a la inyección de dependencias. Esta es mi situación:

app.component.ts:

import {Component} from 'angular2/core';
import {Demo1Service} from './demo-1.service';

@Component({
    selector: 'app',
    template: `<div>test template</div>`,
    providers: [Demo1Service]
})
class AppComponent {
    constructor(private _demo1Service: Demo1Service) {}
}

export {AppComponent};

demo-1.service.ts

import {Injectable} from 'angular2/core';
import {Data1Store} from './data-1.store';

@Injectable()
class Demo1Service {
    constructor(private _data1Store: Data1Store) {}
};

export {Demo1Service};

data-1.store.ts

import {Injectable} from 'angular2/core';

@Injectable()
class Data1Store {}

export {Data1Store};

http://plnkr.co/edit/4aBNbAxtHbUvVqxPRUbv?p=preview

Si ejecutas este plunker, verás que Angular necesita que se defina un proveedor para el Data1Store en el AppComponent. Para tener cierta separación de responsabilidades, preferiría que el AppComponent no necesitara conocer la existencia del Data1Store.

¿Hay algo que estoy aquí?

Respuesta #1

De hecho, el proveedor necesita estar presente al ejecutar el servicio Demo1Service. Debido a los inyectores jerárquicos, no es obligatorio tener el proveedor correspondiente definido a nivel del componente.

Esto también se puede hacer para toda la aplicación o dentro de un inyector padre. Definir este proveedor al iniciar tu aplicación parece ser lo que necesitas:

bootstrap(AppComponent, [ Demo1Service, Data1Store ]);

De esta manera no necesitas definir tus proveedores de servicio dentro del atributo providers de tu componente

Aquí hay una visión general de todos estos elementos y sus relaciones:

Application
     |
AppComponent  --- Demo1Service --- Data1Store

En tal aplicación, tenemos dos inyectores:

• El inyector de aplicaciones que se puede configurar utilizando el segundo parámetro de la función bootstrap

• El inyector AppComponent que se puede configurar utilizando el atributo providers de este componente. Puede "ver" los elementos definidos en el inyector de la aplicación. Esto significa que si no se encuentra un proveedor en este proveedor, se buscará automáticamente en este inyector padre. Si tampoco se encuentra allí, se lanzará un error de "proveedor no encontrado". Esta pregunta podría darte más detalles sobre cómo funcionan los inyectores jerárquicos de Angular:

• ¿Cuál es la mejor manera de inyectar un servicio en otro en Angular 2 (Beta)?