Angularでは、シングルページアプリケーション（SPA）の中で複数の画面を切り替えるためにルーティング機能が使われます。
本章では、ルーティングモジュールの設定方法から、URLパス・リンクの定義、動的パラメータ、ネストルート、404ページの実装までを解説します。
1. ルーティングモジュールの設定
Angular CLIでプロジェクト作成時に「Routingを追加しますか？」に「Yes」と答えると、自動的にapp-routing.module.tsが生成されます。
なければ手動で作成・登録する必要があります。
以下のようにルートの配列を定義し、各パスに対応するコンポーネントを紐づけます。
<!-- app-routing.module.ts -->
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
このルーティングモジュールをAppModuleにインポートします。
import { AppRoutingModule } from './app-routing.module';
@NgModule({ imports: [AppRoutingModule] })
2. パス、リンク、動的パラメータ
■ ルーターアウトレットの設置
HTMLテンプレート（通常はapp.component.html）に<router-outlet>を配置することで、そこにルートで指定したコンポーネントが差し込まれるようになります。
<router-outlet></router-outlet>
■ リンクの定義
Angularでは通常の<a href>ではなく、routerLinkディレクティブを使用してルーティングします。
<a routerLink="/users">ユーザー一覧へ</a>
■ 動的パラメータのルーティング
ユーザー詳細など、URLにIDを含める動的なルーティングは以下のように定義します。
const routes: Routes = [
{ path: 'users/:id', component: UserDetailComponent }
];
パラメータの取得は以下のように行います。
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}
ngOnInit() {
const userId = this.route.snapshot.paramMap.get('id');
console.log('ユーザーID:', userId);
}
3. ネストされたルートと404対応
■ ネストルーティングの定義
あるルートの中に子ルートを定義したい場合、以下のようにchildrenを使用します。
const routes: Routes = [
{
path: 'users',
component: UsersComponent,
children: [
{ path: ':id', component: UserDetailComponent }
]
}
];
■ 404 Not Found ページの設定
存在しないパスにアクセスされた場合の404対応は、**ワイルドカードルートで実装します。必ずルート配列の最後に書いてください。
{ path: '**', component: NotFoundComponent }
これにより、定義されていないURLにアクセスされたときにNotFoundComponentが表示されます。
まとめ
Angularのルーティングは、アプリケーションに複数の画面を持たせるための基本機能です。
ルートモジュールでルールを定義し、routerLinkやrouter-outletを使って画面遷移を制御します。
動的パラメータやネストルート、404ページなども柔軟に対応可能です。
