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が最適な選択肢になります。
異なるページ間で情報を共有する
共有サービスを使用する最も簡単な例の1つは、アプリケーションの特定のページからいくつかのデータを保存し、そのデータを別のページから再度取得する場合です。
1つのオプションは、そのデータをパラメータとして送信することです（たとえば、1つのページが別のページを呼び出す場合）が、アプリケーションの完全に異なる部分からそのデータを使用する場合、これは最善の方法ではないようですそれ。 共有サービスが再生されるのはそのときです。
この例では、文字列を格納するMyService saveMessage()と、文字列を格納するgetMessage() 2つの単純なメソッドしかないMyServiceという単純なサービスを使用します。このコードは、 この実際のプランナーの一部であり、実際にそれを見ることができます。
import {Injectable} from '@angular/core';
@Injectable()
export class MyService {
private message: string;
constructor(){ }
public saveMessage(theMessage: string): void {
this.message = theMessage;
}
public getMessage(): string {
return this.message;
}
}
次に、新しいメッセージを保存する場合は、 saveMessage(theMessageWeWantToSave);使用できsaveMessage(theMessageWeWantToSave);メソッドをMyServiceインスタンス（単にserviceと呼ばれservice ）からMyServiceます。
import { Component } from "@angular/core";
import { MyService } from 'service.ts';
@Component({
templateUrl:"page1.html"
})
export class Page1 {
message: string;
// ...
public saveSecretMessage(): void {
this.service.saveMessage(this.message);
}
}
同じように、そのデータを取得する場合は、次のようにサービスインスタンスからgetMessage()メソッドを使用できます。
import { Component } from "@angular/core";
import { MyService } from 'service.ts';
@Component({
templateUrl:"page2.html"
})
export class Page2 {
enteredMessage: string;
constructor(private service: MyService) {
this.enteredMessage = this.service.getMessage();
}
// ...
}
MyServiceサービスの参照がどこに含まれるべきか、なぜそれが含まれるべきかを知るには、 Remarksセクションをチェックしてください。
