サービスを使用してAngular 2アプリケーションに初期値を格納(共有)するにはどうすればよいですか? 私は、サーバーからリソース、構成、その他の配列やオブジェクトとして多くのデータをロードするサービスを持っています。 コンポーネントをロードするたびに、またはビューにルーティングするたびにこのデータをロードする必要はなく、アプリケーションの起動時にこれらのオブジェクトと配列が既にロードされていて、必要に応じてオプションでリロードできます。 この値を保存する場所とサービスを使用するコンポーネント間で共有する方法はどこですか?おかげさまで 角度2、サーバーから一度データをロードして結果をコンポーネントに共有するベストプラクティス
答えて
あなたはおよそ共有サービスを考えると、確かにのみ単一のインスタンスが間で共有されていることを確認する必要がありますコンポーネント。
shared service and shared object demo
注 :
はブートストラップ機能でサービスを登録することを忘れないでください。コードを深く観察してください。あなたはあなたが望むものを得るでしょう。ルーティング部分は示されていません。更なる実施のためのサーフplunk
service.ts
正しい場所は間違いなくサービスです。このサービスをプロバイダーとして1か所にのみ追加すると、1つのインスタンスがアプリケーション全体と共有されます。あなたは
bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]);
@Component({
selector: 'some-comp',
providers: [/* don't add MyService here !! */]})
class MyComponent {}
それを必要とするツリー内の唯一の最高のコンポーネントにサービスを提供する方が良いと思いませんか?関係のないコンポーネントは、新しく作成されたサービスを認識していませんか? – ReactingToAngularVues
サービスを必要とするコンポーネントが1つだけの場合はまったくです。共有instamceが必要な場合でも、サービスを注入するすべてのコンポーネントで提供される最も頻繁なエラーの1つにすぎません。したがって、コンポーネントに提供することを提案するのは少し慎重です。 –
@GünterZöchbauerベースコンポーネントからデータを共有する例を教えてください。 – Rex
ギュンターが共有サービスについて完全に正しいとは避けたいものです - あなたは、各コンポーネントにプロバイダにそれを追加した場合、各コンポーネントは、独自のインスタンスを取得します!
ここでは、次の呼び出しのためのいくつかの観測に依存している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;
});
}
}
}
あなたの実装は非常に面白いです!だから、すべてのコンポーネントは、新鮮なデータやキャッシュされたデータを読み込むために "subscribe"関数を使うことができます。ありがとうございました –
はい、まさにです。それは加入者のために完全に透明です;-)あなたは大歓迎です! –
私はこの構造体を実装しようとしていますが、私の唯一の疑問は、私のAPIがオブジェクト配列を返しますが、私の "GetData"では返されますが、(例えば特定のインデックスにマッチする)サーバーが新しいオブジェクト配列を返すときに(例えば、サービス内の「リロード」機能の後に)、すべてのコンポーネントにオブジェクトを追加します。 この結果を達成するための提案はありますか?もう一度あなたの時間に感謝します。 –
- 1. 角度2のコンポーネントを共有する
- 2. 角度2のコンポーネントのベストプラクティス
- 3. 角度2のデータ共有アプローチ
- 4. 角度(2+)コンポーネントの構造とデザイン - ベストプラクティス
- 5. 角度ベストプラクティス:連結
- 6. サービスデータを角度コンポーネントにロード
- 7. 角度2ユニットテストでコンポーネントを共有しようとしています
- 8. コントローラ間でデータを共有し、コントローラ間でデータを共有する角度
- 9. 角度jsonデータ - 結果から "qutoes"を削除します。
- 10. 親コンポーネントから角度2/4のngbmodalインスタンスにデータを渡す
- 11. 角度2 - コンポーネント
- 12. 共有モジュールのコンポーネントの再利用角度2
- 13. 角度コンポーネントからデータを取得
- 14. 角度2がコンポーネントからサービスにデータを送信
- 15. 共有サービスによる2つのコンポーネント間の角度2/4通信
- 16. 結果のデータ配列の一部のみを示す角度
- 17. 角度2のコンポーネントとモジュールを遅れてロードする方法
- 18. 角度2共有モジュール循環依存
- 19. 兄弟コンポーネントから別の角度へデータを渡す2
- 20. 角度 - 子コンポーネントからデータを取得していますか?
- 21. コンポーネント間でデータ情報を共有する角度4の問題
- 22. コンポーネントを動的にロードする角度2
- 23. 同じページに複数のコンポーネントをロードする角度2
- 24. 角度2:multiplleコンポーネント
- 25. 遅延ロード角度1.5コンポーネント
- 26. 角度2 ngrx /ストアのベストプラクティス
- 27. VS2015の角度2 - ベストプラクティス
- 28. joomlaコンポーネントから角度2ルーティング
- 29. 角度2コンポーネント入力式を使用して結合(マップ)
- 30. 角度2 - 複数のアプリケーションにまたがるコンポーネントのルーティング/共有
ページが更新されると、情報のために古い変数が返されます。Info = {name: "Jack"}; – Diego