ejemplo - AngularJs 2-instancia múltiple del servicio creado
ng-model (2)
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
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:
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