サービス
Observable データ
HeroService.getHeroes()(この記事でいうとheroProvider.getHeroes()のことです)は同期的なメソッドです。
現状、HeroesComponentでも同期的に取得できるという想定で書かれています。
しかし実際にはこれではダメです。
なぜなら、HeroService.getHeroesはサーバー側から何らかのデータを取得する想定だからです。
チュートリアルではObservableを返すようにします。
これは、後にヒーローデータの取得で利用する Angular の HttpClient.get() メソッドが Observable を返すからです。
Observable HeroService
HTTP に関する章はもうすこし先にありますので、詳しいことはここでは出てきません。
この章ではRxJSライブラリのof()関数を使ってサーバーからデータ取得する風にします。
HeroesComponent での Subscribe
HeroService.getHeroes()(heroProvider.getHeroes())をObservableに対応させましょう。
下記のようになります。
これでHeroたちが非同期で取得できるようになりました。(表示は変わりませんが)
MessagesComponent の作成
CLIからコンポーネントを作成。
ionic generate component messages
app.htmlに作成したものを加えます。
app.module.tsにも忘れずに加えておきましょう。
とりあえずコンポーネントが下部に追加されたことだけを確認してください。
MessageService の作成
続いて、MessageService を作成します。(ここではMessageProviderのことです)
ionic generate provider message
作成したら下記のようにします。
HeroService への注入
HeroServiceに注入します。
下記のようにしてみてください。
これでserviceからserviceを利用する準備が整いました。
HeroService からメッセージを送る
getHeroesメソッドを呼び出したときにmessageServiceにメッセージを追加するようにしてみましょう。
MessageService へバインドする
html側もmessageServiceを利用できるように変えておきます。
あわせてmessageComponentも変えておきます。
下記のように表示されていれば成功です。
