web-dev-qa-db-fra.com

Angular 2, meilleure pratique pour charger les données d'un serveur une fois et partager les résultats avec les composants

Quelle est la meilleure pratique pour stocker (et partager) les valeurs initiales dans une application Angular 2 utilisant un service? J'ai un service qui charge beaucoup de données à partir d'un serveur en tant que ressources, configurations et autres qui sont tableau et objets. Je ne veux pas charger ces données à chaque fois que je charge un composant ou lorsque je route vers une vue, je veux simplement utiliser ces objets et le tableau déjà chargés au démarrage de l'application, et éventuellement recharger si nécessaire. La question est où est le bon endroit pour stocker ces valeurs et comment partager entre les composants qui utilisent le service? Merci.

serviceangular
25
Massimo Magliani

Vous devez penser au service partagé et vous assurer que seule une seule instance est partagé entre les composants.

démonstration du service partagé et de l'objet partagé

Remarque:
n'oubliez pas d'enregistrer le service dans la fonction bootstrap . Observez profondément le code. vous obtiendrez ce que vous voulez. La partie de routage n'est pas illustrée. Surf plunk pour une mise en œuvre plus poussée

service.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.

  }
}
15
micronyks

Gunter a tout à fait raison concernant les services partagés!

Voici quelques détails supplémentaires pour un HTTP qui s'appuie sur des données observables et mises en cache pour les prochains appels:

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;
            });
    }
  }
}
26
Thierry Templier

Le bon endroit est définitivement un service. Si vous ajoutez ce service en tant que fournisseur à un seul endroit, une instance est partagée avec l'ensemble de l'application. Si vous l'ajoutez aux fournisseurs sur chaque composant, chaque composant obtient sa propre instance - ce que vous voulez éviter

bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]);

@Component({
  selector: 'some-comp',
  providers: [/* don't add MyService here !! */]})
class MyComponent {}
12
Günter Zöchbauer