← Angular コース
19. ルートパラメータ — URLから値を受け取る
URLの一部を可変にして値を受け取るには、ルート定義のpathに 'users/:id' のようにコロン付きの名前を書きます。表示されたコンポーネント側では inject(ActivatedRoute) でルート情報を受け取り、route.snapshot.paramMap.get('id') で実際の値を取り出します。/users/7 にアクセスすれば '7' が得られます。
実務では「一覧から1件をクリックして詳細ページへ飛ぶ」という流れが定番で、どのデータの詳細を表示するかをこのパラメータで決めます。取り出したIDをもとにAPIへ問い合わせて、その1件のデータを表示する、という組み合わせがよく使われます。
paramMapから取れる値は、数値に見えても常に文字列です。数値のIDとして使うときは Number() で変換するのを忘れないようにしましょう。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
// ルート定義側: { path: 'users/:id', component: UserDetailComponent }
@Component({
selector: 'app-user-detail',
template: '<p>ユーザーID: {{ userId }}</p>',
})
export class UserDetailComponent {
private route = inject(ActivatedRoute);
// URLが /users/7 なら '7' が入る(値は常に文字列)
userId = this.route.snapshot.paramMap.get('id');
}