routerLinkActive 指令

基本概念

當我們使用 routerLink 來實現應用內的路徑切換時，通常需要視覺上顯示「當前處於哪個路徑」。例如，在導航選單中，我們希望當前訪問的頁面連結能有不同的樣式來標示。這就是 routerLinkActive 指令的用途。

使用方式

基本用法非常簡單，只需在含有 routerLink 的元素上添加 routerLinkActive 屬性，並指定當路由激活時要套用的 CSS 類別名稱：

<a routerLink="/heroes" routerLinkActive="selected">英雄列表</a>

當用戶訪問 /heroes 路徑時，這個連結就會自動套用 selected 類別的樣式。

替代方案比較

你也可以使用 Angular 的屬性繫結來達到類似效果：

<a routerLink="/heroes" [class.selected]="router.url === '/heroes'">英雄列表</a>

但這需要：

在元件中注入 Router 服務
手動檢查當前 URL
對於複雜的路由邏輯較難維護

相比之下，routerLinkActive 提供了更簡潔、更聲明式的解決方案，讓 Angular 路由器自動處理這些邏輯。

進階用法

多個類別

routerLinkActive 可以套用多個 CSS 類別：

<a routerLink="/heroes" routerLinkActive="selected highlighted">英雄列表</a>

精確匹配

默認情況下，routerLinkActive 會在路由路徑是當前 URL 的「前綴」時就激活。例如，如果連結指向 /heroes，當 URL 是 /heroes/1 時也會被視為激活。

如果只想在完全匹配時才激活，可以使用 routerLinkActiveOptions：

<a routerLink="/heroes" 
   routerLinkActive="selected"
   [routerLinkActiveOptions]="{exact: true}">英雄列表</a>

用於容器元素

routerLinkActive 也可以應用在包含 routerLink 的父元素上：

<li routerLinkActive="active-item">
  <a routerLink="/heroes">英雄列表</a>
</li>

在 Standalone 元件中使用

在 Angular 的 standalone 元件中，需要明確引入 RouterLink 和 RouterLinkActive：

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

@Component({
  selector: 'app-nav',
  standalone: true,
  imports: [RouterLink, RouterLinkActive],
  template: `
    <nav>
      <a routerLink="/heroes" routerLinkActive="selected">英雄列表</a>
      <a routerLink="/dashboard" routerLinkActive="selected">儀表板</a>
    </nav>
  `
})
export class NavComponent {}

注意事項

記得在 standalone 元件中引入 RouterLinkActive
對於巢狀路由，父路由的連結預設會在訪問子路由時保持激活
可以結合 CSS 轉場效果，讓導航切換更加平滑
當路由參數改變但路徑相同時，routerLinkActive 不會觸發樣式變化

PreviousrouterLink 指令 Next動態路徑參數

Last updated 4 months ago