Angularにルーティングを追加する。

AngularにRoutingを追加する方法を説明します。

Routingを追加するにはAngularの RouterModuleを使います。

大まかに以下のような事をやります。

• ルーティング管理用のモジュールを追加する。
• ルーティングの設定を追加する。
• AppComponentでルーティングされたコンポーネントを表示する。

まずngコマンドでルーティング管理用のモジュールを作ります。Angularのチュートリアルによれば、これがベストプラクティスとのこと。

ng generate module app-routing --flat --module=app

src/app以下にapp-routing.module.ts が作成されるので、編集します。

routes にルーティングの設定を追加する。

import { NgModule } from '@angular/core';
// RouterModuleを使う宣言
import { RouterModule ,Routes } from '@angular/router';

// Routingに追加したい任意のコンポーネント。
import { HomeComponent } from './home/home.component';
import { HogehogeComponent } from './hogehoge/hogehoge.component';

// ルーティングの設定をここに追加します。
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'hogehoge/:id', component: HogehogeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

AppComponentのテンプレートで、ルーティングされたコンポーネントが表示されるようにします。

<h1>タイトル</h1>
<!-- ↓ここにルーティングされたモジュールが表示される -->
<router-outlet></router-outlet>

これだけでルーティングの設定完了です。

公式ドキュメントの以下が参考になります。

Angular 日本語ドキュメンテーション – ルーティング

以上です。