Angular 2, práctica recomendada para cargar datos de un servidor una sola vez y compartir resultados a los componentes [duplicar]
Esta pregunta ya tiene una respuesta aquí:
- ¿Cuál es la forma correcta de compartir el resultado de una llamada a red Http Angular en RxJS 5? 19 respuestas
¿Cuál es la mejor práctica para almacenar (y compartir) valores iniciales en una aplicación Angular 2 utilizando un servicio? Tengo un servicio que carga muchos datos de un servidor como recursos, configuraciones y otros que son matriz y objetos. No quiero cargar estos datos cada vez que cargue un componente o cuando dirija a una vista, solo quiero usar estos objetos y matriz ya cargados cuando se inicia la aplicación, y opcionalmente recargar si es necesario. La pregunta es ¿dónde está el lugar correcto para almacenar estos valores y cómo compartir entre los componentes que utilizan el servicio? Gracias.
3 answers
Debe pensar en servicio compartido y asegurarse de que solo instancia única se comparta entre los componentes.
Demostración de servicio compartido y objeto compartido
Nota:
no olvide registrar el servicio en la función bootstrap. Observa el código profundamente. conseguirás lo que quieres. La parte de enrutamiento no está demostrada. 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.
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-14 16:49:14
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 siguientes 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;
});
}
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-14 16:40:01
El lugar correcto es definitivamente un servicio. Si agrega este servicio como proveedor en un solo lugar, se comparte una instancia 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 {}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-31 17:20:17