サービスを使用してAngular 2アプリケーションに初期値を保存(および共有)するためのベストプラクティスは何ですか?リソース、構成、その他としてサーバーから多くのデータを読み込むサービスがあります。コンポーネントをロードするたびに、またはビューにルーティングするたびにこのデータをロードするのではなく、アプリケーションの起動時にすでにロードされているこれらのオブジェクトとアレイを使用し、必要に応じてオプションでリロードします。この値を保存する適切な場所と、サービスを使用するコンポーネント間で共有する方法はどこにありますか?ありがとう。
共有サービスについて考え、単一のインスタンスのみを確認する必要がありますコンポーネント間で共有されます。
注:
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.
}
}
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;
});
}
}
}
適切な場所は間違いなくサービスです。このサービスを1つの場所でのみプロバイダーとして追加すると、1つのインスタンスがアプリケーション全体で共有されます。各コンポーネントのプロバイダーに追加すると、各コンポーネントは独自のインスタンスを取得します-これは避けたいものです
bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]);
@Component({
selector: 'some-comp',
providers: [/* don't add MyService here !! */]})
class MyComponent {}