ionic2サービスの使用


備考

共有サービスの使用に関する重要な点の1つは、共有する必要がある最上位のコンポーネントのproviders配列に含まれなければならないことです。

何故ですか?さて、各Component providers配列にMyServiceリファレンスを含めるとしましょう。何かのようなもの:

@Component({
  templateUrl:"page1.html",
  providers: [MyService]
})

そして

@Component({
  templateUrl:"page2.html",
  providers: [MyService]
})

こうすることで、サービスの新しいインスタンスがコンポーネントごとに作成されるので、1ページでデータを保存するインスタンスは、データを取得するために使用されたインスタンスとは異なります。それはうまくいきません。

アプリケーション全体が同じインスタンスを使用するように(サービスをシングルトンサービスとして動作させるため)、次のようにその参照をApp Component追加することができます:

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [MyService]
})

また、 MyServiceリファレンスをionicBootstrap(MyApp, [MyService]);追加することもできionicBootstrap(MyApp, [MyService]);しかしAngular2スタイルのガイドによると

Angular 2インジェクタは、共有される最上部のコンポーネントにサービスを提供します。

どうして? Angular 2インジェクタは階層型です。

どうして?トップレベルのコンポーネントにサービスを提供する場合、そのインスタンスは共有され、その最上位のコンポーネントのすべての子コンポーネントが利用できます。

どうして?これは、サービスがメソッドや状態を共有しているときに理想的です。

どうして?これは、2つの異なるコンポーネントがサービスの異なるインスタンスを必要とする場合には理想的ではありません。このシナリオでは、新規および別個のインスタンスを必要とするコンポーネントレベルでサービスを提供する方がよいでしょう。

そして

それが動作します。それはベストプラクティスではありません。 ブートストラッププロバイダオプションは 、ルーティングサポートなど、 Angular自身の事前登録サービスを設定および上書きするためのものです

... App Componentが最適な選択肢になります。

サービスの使用 関連する例