データをサービスにより提供する」は、データの取得や提供などの管理を、サービスのモジュールに分けました。本稿では、ルーティングの機能によって画面を切り替えます。ページのコンポーネントを差し替えるだけでなく、URLも改めることでページの遷移を示すのです。moduleコマンドを打ち込んでください。ルーティングのモジュール(app-routing.module)がつくられ、以下のようなひな形のクラス(AppRoutingModule)が定められます。{}ルーティングのモジュール(app-routing.module)のTypeScriptコードは、つぎのように書き替えましょう。alias)をimportします。そのうえで、クラスはデコレータ関数NgModule()の引数オブジェクトに、exportsプロパティの配列要素として加えてください。プロパティimportsとdeclarationsは除きます。{}Routes型の定数(routes)に、以下のようにパス('heroines')とコンポーネント(HeroinesComponent)が定められたオブジェクトを配列要素として加えます。そのため、コンポーネントのクラス(HeroinesComponent)は、importしておかなければなりません。RoutesオブジェクトのプロパティpathはURLのパスに加える文字列で、componentはそのパスに遷移するときつくられるコンポーネントです。RouterModule.forRoot()メソッドは、引数のRoutesオブジェクトにもとづいてルーターを初期化します。2」のルーター」参照)。コンポーネントにルーティングの要素を加える親コンポーネント(app.component)のテンプレートは、つぎのように要素を子コンポーネントの(app-heroines)からrouter-outlet(RouterOutlet)ディレクティブに差し替えます。router-outletはルーティングが遷移した表示に切り替えるディレクティブです。このディレクティブの要素には、はじめは何も表示されません(図001)。src/app/app.component.html<h1>{{title}}</h1><!--<app-heroines></app-heroines>--><router-outlet></router-outlet><app-messages></app-messages>図001■router-outletの要素にははじめ何も表示されないここで、ブラウザのルートURLに、つぎのように前述pathプロパティに与えたパスを加えます。すると、ルーテイングによりrouter-outletディレクティブの要素には、コンポーネントが差し込まれます(図002)。http://localhost:4200/heroines図002■ページにコンポーネントが差し込まれて表示されるなお、router-outletは、RouterModuleクラスから提供されるディレクティブです。このクラスはルーテイングのモジュール(app-routing.module)がNgModule()デコレータ関数に渡したオブジェクトのexportsプロパティに配列要素として加え、そのクラス(AppRoutingModule)をアプリケーションモジュール(app.module)のimportsプロパティが配列に納めました。して、アプリケーションのコンポーネントがrouter-outletディレクティブを使えるようになったのです。ルーテイングのリンクを加えるページのリンクからルーティングできるようにしましょう。親コンポーネント(app.component)のテンプレートに、つぎのように<nav>要素の中に<a>要素でリンクを加えます。属性にrouterLink(RouterLink)ディレクティブで与えるのが遷移先のパス("/heroines")です。このディレクティブもRouterModuleクラスから提供されます。routerLink="/heroines">ヒロインたち</a></nav>これで、はじめのページにリンクが加わり、クリックするとリスト表示のコンポーネントが差し込まれます。ブラウザのURLのパスも、ルートから書き替わるはずです。以下のコード001のCSSをコンポーネント(app.component)に定めれば、スタイルが整います(図001)。ダッシュボードのコンポーネントを加える新たにダッシュボードのコンポーネントをつくって、ナビゲーションのリンクに加えましょう。componentコマンドでコンポーネント(dashboard.component)を生成します。dashboardコンポーネント(dashboard.component)のTypeScriptコードには、つぎのように書き加えてください。05」コード002「サービスとリスト表示コンポーネントのTypeScriptコード」参照)。配列のプロパティ(heroines)が定められ、データはメソッド(getHeroines())により納められるかたちです。Array.slice()メソッドが件数を4つに絞っています。コンポーネントがつくられたとき、ngOnInit()からメソッドが呼び出されるのです。4));}}コンポーネント(dashboard.component)のテンプレートとCSSファイルは、以下のコード002のとおりです。テンプレートはngForディレクティブで、プロパティ(heroines)の配列要素の数だけ<a>要素を加えます。リンク先はまだ定められていません。改められたTypeScriptコードも併せて掲げておきます。ナビゲーションにダッシュボードへのリンクを加えるベージのナビゲーションに、ダッシュボードへのリンクを加えます。リスト表示コンポーネントへのリンクと同じく、つぎのようにルーテイングモジュール(app-routing.module)の定数(routes)に配列要素としてプロパティpath('dashboard')とcomponent(DashboardComponent)が与えられたオブジェクトを加えるのです。空のパス('')つまりURLがルート('/')のときの転送先がredirectToプロパティで定められます。これで、はじめにrouter-outletディレクティブの要素が空で示されることはなくなります。Strategy」参照)。DashboardComponent},];あとは、親コンポーネント(app.component)のナビゲーションに、前述で定めたパス("/dashboard")をルーテイングのリンクとして、つぎのようにrouterLinkディレクティブに与えるだけです。これでアプリケーションをブラウザで開くと、ルートがダッシュボードにリダイレクトされます(図004)。ナビゲーションのリンクで、リスト表示とダッシュボードを切り替えることもできるのです。以下のコード003に、ルーティングのモジュール(app-routing.module)のTypeScriptコードと親コンポーネント(app.component)のテンプレート、およびルーティング(AppRoutingModule)やダッシュボード(DashboardComponent)のクラスが組み込まれたアプリケーション(app.module)のTypeScriptコードをまとめました。06」をご覧ください。