Angular 2, Best Practice zum einmaligen Laden von Daten von einem Server und zum Teilen von Ergebnissen an Komponenten

Question

Was ist die beste Vorgehensweise zum Speichern (und Teilen) von Anfangswerten in einer Angular 2-Anwendung mithilfe eines Dienstes? Ich habe einen Dienst, der viele Daten von einem Server als Ressourcen, Konfigurationen und andere, die Array und Objekte sind, lädt. Ich möchte diese Daten nicht jedes Mal laden, wenn ich eine Komponente lade oder wenn ich zu einer Ansicht route, ich möchte diese Objekte und das Array bereits beim Start der Anwendung laden und gegebenenfalls neu laden. Die Frage ist, wo ist der richtige Ort, um diese Werte zu speichern und zu teilen über Komponenten, die den Service nutzen? Danke.

Answer 1

Sie müssen darüber nachdenken, Shared Service und stellen Sie sicher, dass nur einzelne Instanz unter geteilt wird Komponenten.

shared service and shared object demo

Hinweis:
vergessen Sie nicht, Dienst Funktion in Bootstrap zu registrieren. Code tief beachten. du wirst bekommen, was du willst. Routing-Teil wird nicht demonstriert. Surf zupft für die weitere Umsetzung

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. 

    } 
} 

Answer 2

Der richtige Ort ist definitiv ein Service. Wenn Sie diesen Dienst nur als Anbieter an einer Stelle hinzufügen, wird eine Instanz für die gesamte Anwendung freigegeben. Wenn Sie es an die Anbieter auf jeder Komponente hinzufügen, wird jede Komponente eine eigene Instanz - das ist, was Sie

bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]); 

@Component({ 
    selector: 'some-comp', 
    providers: [/* don't add MyService here !! */]}) 
class MyComponent {} 

Answer 3

Gunter ist völlig Recht in Bezug auf Shared Services vermeiden wollen!

Hier sind einige weitere Details für einen HTTP, die auf beobachtbaren und im Cache gespeicherten Daten für den nächsten Anrufe beruht:

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