ejemplo - AngularJs 2-instancia múltiple del servicio creado

ng-model

Question

He creado el servicio AngularJS 2 y lo uso en 2 componentes diferentes: Componente de aplicación y Subcomponente. Cada propiedad de salida ''log'' (una cadena) de mi servicio.

Clase de servicio estatal:

@Injectable ()
class StateService {

    public log : string;
    static count : number = 0;

    constructor () {
        this.log = '''';
        StateService.count++;
        this.writeToLog (''CREATED ''+StateService.count+'' at '' + new Date().toString());
    }

    public writeToLog (text : string) : void {
        this.log += text + ''/n'';
    }
}  

Componente :

@Component ({
    selector : ''Sub-Component'',
    template : `<hr>
            This is the Sub-Component !
            <BR>
            StateService Log : 
            <pre>{{ _stateService.log }}</pre>
            <button (click)="WriteToLog ()">Write to log</button>
            `,
    providers : [StateService]
})

export class SubComponent {
    constructor (private _stateService : StateService) {
    }

    public WriteToLog () : void {
        this._stateService.writeToLog (''From Sub-Component - This is ''+new Date().toString());
    }
}

Ejemplo vivo de código here

Yo excepto que el servicio se crea una vez y cuando cada componente llama al método WriteToLog, la salida es la misma en cada componente pero no lo es.

Ejemplo de salida:

El componente de aplicación puede generar esto:

Instancia 1 - Creado el jueves 21 de enero de 2016 11:43:51

De App-Component - Esto es Jue 21 Ene 2016 11:43:54

De App-Component - Esto es Jue 21 Ene 2016 11:43:55

y el Subcomponente puede dar salida a esto:

Instancia 2 - Creado el jueves 21 de enero de 2016 11:43:51

Desde el subcomponente: esto es jueves 21 de enero de 2016 11:43:57

Del subcomponente: este es el jueves 21 de enero de 2016 11:43:58

Así que parece que se crea 2 instancias de servicio (instancia 1 + instancia 2)

Solo quiero una instancia;) y cuando agrego una cadena en el registro, esto debe aparecer en ambos componentes.

Gracias por tu ayuda

Answer 1

Además de la gran respuesta de Günter, este enlace quizás podría dar más detalles sobre cómo funciona la inyección de dependencia jerárquica de Angular2:

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

Answer 2

Angular de actualización> = 2.0.0-RC.6

No agregue el servicio a los proveedores del componente. En lugar de agregarlo a

@NgModule({ providers: [...], ...

(de un módulo que no está cargado perezosamente porque los módulos cargados perezos introducen su propio alcance)

@Component ({
    selector : ''Sub-Component'',
    template : `<hr>
            This is the Sub-Component !
            <BR>
            StateService Log : 
            <pre>{{ _stateService.log }}</pre>
            <button (click)="WriteToLog ()">Write to log</button>
            `,
    // providers : [StateService] <== remove
})

Angular <= 2.0.0-RC.5

Si lo agrega a un componente, obtiene una nueva instancia de servicio para cada instancia de componente. En lugar de agregarlo a

bootstrap(AppComponent, [StateService]);

Puede tener un control más preciso agregándolo a un solo componente, luego este componente y todos los hijos reciben la misma instancia inyectada, pero de lo contrario, la aplicación funciona con la instancia creada por bootstrap() . Este es el "jerárquico" en Angulars DI.

Ver también
- http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
- http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html