AngularJs 2: più istanze di servizio create

Question

Ho creato il servizio AngularJS 2 e lo utilizzo in 2 componenti diversi: Componente App & Componente secondaria. Ogni proprietà di output 'log' (una stringa) del mio servizio.

classe StateService:

@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()); 
    } 
} 

vivo esempio di codice here

ho tranne che il servizio viene creata una sola volta e quando ogni chiamata di metodo WriteToLog componente , l'output è lo stesso in ogni componente ent, ma non lo è.

Esempio di emissione:

L'App-componente in grado di produrre questo:

Istanza 1 - Creato a gio gen 21 2016 11:43:51

Da App-Componente - Questo è Gio 21 Gen 2016 11:43:54

Da App-Componente - Questo è Gio 21 Gen 2016 11:43:55

e del Sub-componente può produrre questo:

grado 2 - Creato a gio gen 21 2016 11:43:51

Dal sub-componenti - Questo è Gio 21 Gen 2016 11 : 43: 57

Dal sub-Component - Questo è gio gen 21 2016 11:43:58

Così sembra che si crea 2 un'istanza del servizio (esempio 1 + esempio 2)

Voglio solo un'istanza;) e quando aggiungo stringa nel registro, questo deve apparire in entrambi i componenti.

Grazie per il vostro aiuto

Answer 1

aggiornamento angolare> = 2.0.0-rc.6

Non aggiungere il servizio ai fornitori del componente. Invece inserirlo a

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

(di un modulo che è non pigrizia loaded perché moduli caricati pigri introducono proprio ambito)

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

angolare < = 2.0.0-RC.5

Se lo si aggiunge a un componente, si ottiene una nuova istanza di servizio per ogni istanza di componente. Invece aggiungerlo al

bootstrap(AppComponent, [StateService]); 

È possibile avere un controllo più granulare aggiungendolo ad un singolo componente, allora questo componente e tutti i bambini ottengono la stessa istanza iniettato ma per il resto l'applicazione funziona con l'istanza creato da bootstrap(). Questo è il "gerarchico" in Angulars DI.

Vedi anche
- 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

Answer 2

Oltre alla grande risposta del Günter, questo link potrebbe forse dare maggiori dettagli su come la dipendenza iniezione gerarchica dei Angular2 funziona:

• What's the best way to inject one service into another in angular 2 (Beta)? .