web-dev-qa-db-ja.com

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

サービスを使用してAngular 2アプリケーションに初期値を保存（および共有）するためのベストプラクティスは何ですか？リソース、構成、その他としてサーバーから多くのデータを読み込むサービスがあります。コンポーネントをロードするたびに、またはビューにルーティングするたびにこのデータをロードするのではなく、アプリケーションの起動時にすでにロードされているこれらのオブジェクトとアレイを使用し、必要に応じてオプションでリロードします。この値を保存する適切な場所と、サービスを使用するコンポーネント間で共有する方法はどこにありますか？ありがとう。

serviceangular
25
Massimo Magliani

共有サービスについて考え、単一のインスタンスのみを確認する必要がありますコンポーネント間で共有されます。

共有サービスと共有オブジェクトのデモ

注：
bootstrap関数にサービスを登録することを忘れないでください。コードを深く観察します。あなたが欲しいものを手に入れます。ルーティング部分は示されていません。さらなる実装のためのサーフプランク

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は共有サービスに関して完全に正しいです！

次に、次の呼び出しでオブザーバブルとキャッシュデータに依存する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;
            });
    }
  }
}
26
Thierry Templier

適切な場所は間違いなくサービスです。このサービスを1つの場所でのみプロバイダーとして追加すると、1つのインスタンスがアプリケーション全体で共有されます。各コンポーネントのプロバイダーに追加すると、各コンポーネントは独自のインスタンスを取得します-これは避けたいものです

bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]);

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