23. routerLink — 画面遷移のリンクを作る

ルーティングを設定したら、ページ間を移動するリンクは <a href> ではなく <a routerLink="/about"> と書きます。routerLink を使うと、ページ全体を再読み込みせずに、必要な部分だけを差し替えて画面が切り替わります。これがシングルページアプリの軽快な遷移を支える仕組みです。href を使うとブラウザがページ全体を読み込み直してしまい、その良さが失われます。

パスに値を渡したいときは、routerLink="/users/7" のように文字列で書くほか、[routerLink]="['/users', userId]" と配列で書いてクラスの値を組み込めます。一覧の各行から詳細ページへ飛ばす、といった定番のリンクがこの書き方で作れます。

あわせて覚えたいのが routerLinkActive です。<a routerLink="/about" routerLinkActive="active"> と書くと、今表示しているURLがそのリンク先と一致するときだけ active クラスが付きます。ナビゲーションメニューで「今いるページ」を強調表示するのに使う定番の機能です。routerLink を使うには、テンプレートで RouterLink(必要なら RouterLinkActive)を imports に追加します。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-nav',
  imports: [RouterLink, RouterLinkActive],
  // routerLink で遷移、routerLinkActive で現在地を強調する
  template:
    '<nav>' +
    '  <a routerLink="/" routerLinkActive="active">ホーム</a>' +
    '  <a routerLink="/about" routerLinkActive="active">About</a>' +
    '  <a [routerLink]="[\'/users\', userId]">マイページ</a>' +
    '</nav>',
  styles: ['.active { font-weight: bold; }'],
})
export class NavComponent {
  userId = 7; // [routerLink] で /users/7 へのリンクになる
}

公式ドキュメントで詳しく ↗