¿Cuál es la mejor práctica para almacenar (y compartir) valores iniciales en una aplicación Angular 2 usando un servicio? Tengo un servicio que carga muchos datos de un servidor como recursos, configuraciones y otros que son matrices y objetos. No quiero cargar estos datos cada vez que cargo un componente o cuando me dirijo a una vista, solo quiero usar estos objetos y la matriz ya cargada cuando se inicia la aplicación y, opcionalmente, volver a cargar si es necesario. La pregunta es ¿dónde está el lugar correcto para almacenar estos valores y cómo compartir entre los componentes que usan el servicio? Gracias.
¡Gunter tiene toda la razón con respecto a los servicios compartidos!
Aquí hay algunos detalles más para un HTTP que se basa en observables y datos almacenados en caché para las próximas llamadas:
export class SharedService { constructor(private http:Http) { } getData() { if (this.cachedData) { return Observable.of(this.cachedData); } else { return this.http.get(...) .map(res => res.json()) .do((data) => { this.cachedData = data; }); } } }Debe pensar en el servicio compartido y asegurarse de que solo se comparta una instancia entre los componentes.
demostración de servicio compartido y objeto compartido
Nota :
no olvide registrar el servicio en la función de arranque . Observa el código profundamente. obtendrás lo que quieres. La parte de enrutamiento no se muestra. Surf plunk para una mayor implementación
servicio.ts
import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core' import {Router} from 'angular2/router'; import {Http} from 'angular2/http'; export interface Info { name:string; } @Injectable() export class NameService { constructor(http:Http;router:Router) { this.http=http; // you can call server resource from here and store it down to any variable. } info: Info = { name : "Jack" }; change(){ this.info.name = "Jane"; // this.info is shared among components. } }El lugar correcto es definitivamente un servicio. Si agrega este servicio como proveedor en un solo lugar, una instancia se comparte con toda la aplicación. Si lo agrega a los proveedores en cada componente, cada componente obtiene su propia instancia, que es lo que desea evitar
bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]); @Component({ selector: 'some-comp', providers: [/* don't add MyService here !! */]}) class MyComponent {}