隨記

Week 04 · Day 04 — routerLink 與 router-outlet

學習目標

  • 用 routerLink 建立導覽連結
  • 用 router-outlet 顯示路由內容
  • 不重新載入頁面地切換視圖

重點

router-outlet - 路由匹配到的元件顯示在這裡（「插座」） 

<router-outlet></router-outlet>
- 放在根元件模板中

routerLink - 取代 href，讓 Angular 處理導覽（SPA 不整頁重載） 

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

完整根元件模板 

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

補充：active 樣式 

<a routerLink="/" routerLinkActive="active">Home</a>
- routerLinkActive="active" 在連結為目前路由時加上 CSS class

實作

  1. 在 app.component.html 放一個 <nav> 含兩個 routerLink
  2. 加上 <router-outlet>
  3. 點導覽連結，觀察 URL 與畫面變化（不重新載入）
  4. 加 routerLinkActive="active" 體會切換狀態

作業

  • 用 routerLink 新增 Home / About 導覽
  • 加上 router-outlet
  • 說明 routerLink 與普通 href 的差異