サンプルコードで身につける: routerLink — 画面遷移のリンクを作る

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1基本のナビゲーションリンク

routerLink の最小構成で、href の代わりに routerLink を使ったリンク集です。RouterLink を imports に追加し、パスを文字列で指定するだけで、再読み込みのないSPAらしい遷移になります。ヘッダーやサイドバーのメニューは、実務でもまずこの形から始まります。

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

@Component({
  selector: 'app-header',
  imports: [RouterLink],
  // href ではなく routerLink で書くのがAngularの基本
  template:
    '<nav>' +
    '  <a routerLink="/">ホーム</a>' +
    '  <a routerLink="/products">商品一覧</a>' +
    '  <a routerLink="/contact">お問い合わせ</a>' +
    '</nav>',
})
export class HeaderComponent {}

2配列形式でパラメータ付きのリンクを作る

[routerLink] に配列を渡すと、クラスの値を組み込んだ /books/1 のようなURLを組み立てられます。一覧の各行から詳細ページへ飛ばすという実務の定番パターンで、@for で回した各データのIDをそのままリンクにできます。文字列連結で href を作るより安全で読みやすい書き方です。

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

@Component({
  selector: 'app-book-list',
  imports: [RouterLink],
  // 配列の要素がつながって /books/1 のようなURLになる
  template:
    '<ul>' +
    '  @for (book of books; track book.id) {' +
    '    <li><a [routerLink]="[\'/books\', book.id]">{{ book.title }}</a></li>' +
    '  }' +
    '</ul>',
})
export class BookListComponent {
  books = [
    { id: 1, title: 'Angular入門' },
    { id: 2, title: 'TypeScript実践' },
  ];
}

3routerLinkActive で現在地を強調する

表示中のURLとリンク先が一致したときだけ、指定したクラスが自動で付きます。ナビゲーションメニューで「今いるページ」を太字や下線で示す、実務では必ずと言っていいほど使う機能です。ホーム(/)はどのURLにも前方一致してしまうので、exact: true で完全一致に絞るのがお約束です。

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

@Component({
  selector: 'app-global-nav',
  imports: [RouterLink, RouterLinkActive],
  // 表示中のURLと一致するリンクにだけ current クラスが付く
  template:
    '<nav>' +
    '  <a routerLink="/" routerLinkActive="current"' +
    '     [routerLinkActiveOptions]="{ exact: true }">ホーム</a>' +
    '  <a routerLink="/news" routerLinkActive="current">ニュース</a>' +
    '  <a routerLink="/mypage" routerLinkActive="current">マイページ</a>' +
    '</nav>',
  styles: ['.current { font-weight: bold; border-bottom: 2px solid teal; }'],
})
export class GlobalNavComponent {}

4[queryParams] でクエリ付きリンクを作る

routerLink と [queryParams] を組み合わせると、/items?sort=new のような ? 以降を持つリンクになります。並び替えや絞り込みの条件をURLに載せる実務パターンで、リンク先のコンポーネントは queryParamMap で値を受け取ります。条件がURLに残るので、その状態のまま共有・ブックマークできるのが利点です。

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

@Component({
  selector: 'app-sort-links',
  imports: [RouterLink],
  // [queryParams] のオブジェクトが ? 以降のクエリ文字列になる
  template:
    '<nav>' +
    '  <a routerLink="/items" [queryParams]="{ sort: \'new\' }">新着順</a>' +
    '  <a routerLink="/items"' +
    '     [queryParams]="{ sort: \'price\', order: \'asc\' }">価格が安い順</a>' +
    '</nav>',
})
// 1つ目は /items?sort=new、2つ目は /items?sort=price&order=asc へのリンクになる
export class SortLinksComponent {}

5アプリ内は routerLink、外部サイトは href

routerLink はあくまでアプリ内のルート定義に対する遷移で、外部サイトへは従来どおり href を使います。アプリ内リンクを href で書くとページ全体が再読み込みされてSPAの軽快さが失われる、という違いを1つのフッターで対比した例です。外部リンクに target="_blank" を付けるときは rel="noopener" もセットにするのが実務の習慣です。

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

@Component({
  selector: 'app-footer-links',
  imports: [RouterLink],
  template:
    '<footer>' +
    // アプリ内のページ: routerLink なら再読み込みなしで切り替わる
    '  <a routerLink="/terms">利用規約</a>' +
    // 外部サイト: ルート定義の外なので href を使う
    '  <a href="https://angular.jp" target="_blank" rel="noopener">' +
    '    公式ドキュメント' +
    '  </a>' +
    '</footer>',
})
export class FooterLinksComponent {}