ルーティングで画面を切り替える」は、アプリケーションにルーティングのモジュールを新たに加えました。ページに差し込むコンポーネントをURLとともに改めて、ページが遷移するように表現したのです。本稿では、ルーティングのコンポーネントをさらに切り分けます。ダッシュボードやリスト表示のコンポーネントで選択した個別データをルーティングして、詳細情報の表示に遷移させます。04」コード001「詳細情報とリスト表示のコンポーネントのテンプレート」)。これを分けて、まずはダッシュボードのコンポーネント(dashboard.component)から遷移させましょう。そのために、ルーティングのモジュール(app-routing.module)のTypeScriptコードに、つぎのように詳細情報コンポーネントのクラス(HeroineDetailComponent)へのルーティングを加えます。pathプロパティに与えたパスの文字列にコロン(:)で添えたのは変数(id)です。ダッシュボードから選んだデータの番号(id)が値として入ります。{}ダッシュボードコンポーネント(dashboard.component)のテンプレートの<a>要素には、つぎのようにrouterLinkディレクティブにルーティング先のパスを定めます。この値は前述ルーティングモジュール(app-routing.module)に詳細情報コンポーネントのパスとして定めたpathプロパティの変数(id)に納められます。--></div></a></div>ここまでの手直しでアプリケーションを開いてダッシュボードのリンクをクリックすると、ダッシュボードが消えるだけで詳細情報は表れません。URLはたとえばつぎのように詳細情報のパスに変わるでしょう。実は、詳細情報コンポーネントもページに差し込まれています。選択したデータがコンポーネントに渡されないため、表示されないのです。ルーティングしたコンポーネントにデータを表示する詳細情報コンポーネントは、どのようにしてデータを受け取ればよいでしょうか。ルーティングのURLに、選ばれたデータの番号が加えられることは確かめました。すると、その番号からサービス(heroine.service)に問い合わせて、データを返してもらうことができるはずです。そのためのメソッド(getHeroine())を、以下のようにサービスのクラス(HeroineService)に加えます。引数に受け取った番号(id)をデータの配列(HEROINES)から探すのが、Array.find()メソッドです。引数のコールバックは配列要素をひとつひとつ引数に受け取り、関数本体の条件がtrueと評価された要素を返します。メソッドが引数に受け取った番号のデータが戻り値となるのです。メソッドは処理が行われた旨のテキストをメッセージサービス(messageService)に加えます。バックティック(``)で括ったテンプレート文字列には、ドル記号と波かっこ${}で変数を含めることができます。05」03「Observableを使って非同期に処理する」参照)。サービスがObservableオブジェクトを返すことにより、のちにデータがHTTPリクエストで得られるようになっても、サービスを使うクラスは何も変えずに済むのです。id));}}詳細情報のコンポーネント(heroine-detail.component)のTypeScriptコードには、以下のようにActivatedRouteとLocationクラスおよびサービスのクラス(HeroineService)をimportしましょう。すると、コンストラクタはこれらのインスタンスを受け取りますので、それぞれprivateのプロパティに定めます。加えるのは、サービスにデータを番号で問い合わせて受け取るメソッド(getHeroine())です。番号はルーティングされたURLから取り出さなければなりません。そのために、ActivatedRouteオブジェクト(route)のsnapshot.paramMapプロパティにParamMap.get()メソッドで、パスに加えた変数名(id)の文字列を引数として与えます。得られた番号をサービス(heroineService)のメソッド(getHeroine())に渡し、返されたオブジェクトに対してObservable.subscribe()メソッドを呼び出せばデータが得られるのです。ParamMap.get()メソッドの戻り値は文字列のため、+演算子を添えることにより定数(id)には数値を代入しました。引数の名前のパラメータがもつ文字列値そして、ngOnInit()メソッドからデータ問い合わせのメソッド(getHeroine())を呼び出すことにより、コンポーネントがルーティングでページに差し込まれたとき、そのデータがプロパティに納められます。これで、ダッシュボードから項目が選ばれると、遷移した詳細情報コンポーネントにそのデータが示されるのです(図001)。リスト表示から詳細情報に遷移するリスト表示のコンポーネント(heroines.component)には詳細情報コンポーネント(heroine-detail.component)を子要素として差し込んでいました。これをダッシュボードと同じく、詳細情報にルーティングさせましょう。{}リスト表示のコンポーネント(heroines.component)のテンプレートからは、詳細情報コンポーネントの子要素(app-heroine-detail)は除きます。替わりに<li>要素に加えるのが、つぎのようにrouterLinkディレクティブでルーティング先のパスを与えた<a>要素です。コンポーネントの見出し(<h2>要素)も、この機会に加えました(図002)。テンプレートのHTML要素の組み立ても変わったので、コンポーネントのスタイルは以下のコード001のCSSに改めます。併せて、書き直したテンプレートのHTMLコードも掲げておきましょう。ダッシュボードのリスト表示から詳細表示へのルーティングダッシュボードとリスト表示の画面それぞれから、詳細表示へのルーティングはこれででき上がりました。ルーティング(app-routing.module)とサービス(heroine.service)のモジュールのTypeScriptコードおよびリスト表示コンポーネント(heroines.component)のテンプレートは、つぎのコード002にまとめたとおりです。ナビゲーションを戻る詳細情報コンポーネント(heroine-detail.component)のテンプレートに、つぎのように「戻る」ボタンを加えましょう。clickイベントにバインディングしたメソッド(goBack())は、このあと定めます。詳細情報には、ダッシュボードとリスト表示のふたつの画面から遷移できました。したがって、そのどちらから来たかに応じてルーティングをさかのぼることになるのです。(click)="goBack()">戻る</button></div>ブラウザの履歴を戻るのは、Location.back()メソッドです。ブラウザとやり取りするサービスクラスLocationのオブジェクトは、コンストラクタがprivateのプロパティ(location)に定めていました。新たに加えるメソッド(goBack())からこれを、つぎのように呼び出せばよいのです。{this.location.back();}}詳細情報のコンポーネント(heroine-detail.component)に「戻る」ボタンが加わりました(図003)。クリックするとブラウザの履歴が確かめられ、ダッシュボードかリスト表示のうち、詳細情報にナビゲートした画面に戻るはずです。コンポーネントのスタイルは、以下のコード003のCSSに改めてください。テンプレートのHTMLコードも、併せて掲げておきます。要らなくなったコードは除く今回のアプリケーションの動きは、これででき上がりです。書き直した結果、要らなくなったコードが少しあります。残しておくのは無駄ですし、後のち予期しない問題を起こすかもしれません。コードが膨れ上がらないうちに除いておきましょう。リスト表示のコンポーネント(heroines.component)はテンプレートから詳細情報の要素を外しました。そのためつぎのように、詳細情報にデータを与えるための選択項目のプロパティ(selectedHeroine)と、プロパティに値を定めるメソッド(onSelect())は使いません。heroine;}*/}詳細情報のコンポーネント(heroine-detail.component)は、選択されたデータをサービスから得るようにしました。すると、親だったリスト表示のコンポーネントから参照を得るためにプロパティ(heroine)に添えていたデコレータ関数Input()は意味がありません。したがって、importもしなくてよいということです。Heroine;}つぎのコード004が、手直しの済んだリスト表示(heroines.component)と詳細情報(heroine-detail.component)のコンポーネントのTypeScriptコードです。アプリケーションの動きやファイルそれぞれのコードについては、StackBlitz「angular-6-example-tour-of-heroines-07」のサンプルコードをお確かめください。