角度2、サーバーから一度データをロードして結果をコンポーネントに共有するベストプラクティス

Question

サービスを使用してAngular 2アプリケーションに初期値を格納（共有）するにはどうすればよいですか？ 私は、サーバーからリソース、構成、その他の配列やオブジェクトとして多くのデータをロードするサービスを持っています。 コンポーネントをロードするたびに、またはビューにルーティングするたびにこのデータをロードする必要はなく、アプリケーションの起動時にこれらのオブジェクトと配列が既にロードされていて、必要に応じてオプションでリロードできます。 この値を保存する場所とサービスを使用するコンポーネント間で共有する方法はどこですか？おかげさまで

Answer 1

あなたはおよそ共有サービスを考えると、確かにのみ単一のインスタンスが間で共有されていることを確認する必要がありますコンポーネント。

shared service and shared object demo

注 ：
はブートストラップ機能でサービスを登録することを忘れないでください。コードを深く観察してください。あなたはあなたが望むものを得るでしょう。ルーティング部分は示されていません。更なる実施のためのサーフplunk

service.ts

​​

Answer 2

正しい場所は間違いなくサービスです。このサービスをプロバイダーとして1か所にのみ追加すると、1つのインスタンスがアプリケーション全体と共有されます。あなたは

bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]); 

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

Answer 3

ギュンターが共有サービスについて完全に正しいとは避けたいものです - あなたは、各コンポーネントにプロバイダにそれを追加した場合、各コンポーネントは、独自のインスタンスを取得します！

ここでは、次の呼び出しのためのいくつかの観測に依存しているHTTPのための詳細およびキャッシュされたデータは以下のとおりです。

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