iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
1
Modern Web

Angular 深入淺出三十天系列 第 20

[Angular 深入淺出三十天] Day 19 - 路由(二)

Imgur

昨天我們完成了上圖的路由設定與換頁效果,所以 Angular 的路由機制到底做了什麼呢?

還記得我們昨天有在 app-routing.module.ts 做了以下設定嗎?

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  }
];

這些主要是在設定路由

當瀏覽器的 URL 有變動的時,Angular 的路由機制會從這裡找找看有沒有相對應的路由設定,進而顯示相對應的 Component。

不過目前這樣子的設定其實不太夠,只要輸入我們沒有設定的路由路徑,畫面都會變成空白的,因為 Angular 的路由機制找不到可以配置的 Component。

所以通常我們都還會再加上兩個路由的設定,其中一個路由是:

{ 
  path: '',
  component: HomeComponent
}

這個路由的設定我通常會稱其為預設路由,就像如果我們在瀏覽器的網址列輸入iT邦幫忙的網址 https://ithelp.ithome.com.tw/ 之後,iT邦幫忙會顯示出「技術問答」頁,然後如果我們輸入 https://ithelp.ithome.com.tw/questions 之後,也是出現「技術問答」頁的意思一樣。

另外一個路由則是:

{
  path: '**', 
  redirectTo: 'home', 
  pathMatch: 'full'
}

這個路由狀態的設定我通常會稱其為萬用路由或是轉向路由

萬用的意思是因為 path: '**',是指不管是什麼樣的路徑都會符合這個路由設定的意思;而轉向則是因因為 redirectTo 的關係,使這個路由設定具有重新導向的功能。

redirectTo: 'home' 則是說其將當前這個路徑改回 home 並重新導向過去的意思。

至於 pathMatch 則是因為只要我們有使用 redirectTo 這個屬性的話,就必須要一併加入 pathMatch 這個屬性的設定,不然系統會拋出錯誤。

不過轉向路由最多只能轉向一次,不能從 / 轉到 /home 之後再轉到 /about

特別要注意的是,路由是有順序性的,因為 Angular 的路由機制在比對路由的時候,是從頭一個一個比對的。如果其中有兩個同樣 path 的路由,會顯示的一定是放在比較前面的那個。而萬用路由則是一定要放在最後一個,不然你會發現在它後面的路由怎樣都不會出現。

那 Angular 的路由機制怎麼知道我們要切換的 Component 的位置呢?

Angular 的路由機制靠的是我們放在 Template 裡的路由插座 - <router-outlet></router-outlet>

路由插座有點像是定位點的概念,我們只要把我們需要切換顯示的區塊裡放入這個路由插座,Angular 的路由機制就會將找到的路由設定裡要顯示的 Component 插入,進而達成換頁的效果。

至於超連結的部份,則是在 a 標籤上加上 [routerLink] 的屬性,就像我們昨天做的那樣:

<ul>
  <li><a [routerLink]="'/home'">Home</a></li>
  <li><a [routerLink]="'/about'">About</a></li>
</ul>

或是:

<ul>
  <li><a routerLink="/home">Home</a></li>
  <li><a routerLink="/about">About</a></li>
</ul>

值得一提的是,如果是使用 [routerLink] 的話,其實是可以指定陣列給它的,像是:

<ul>
  <li><a [routerLink]="['/home']">Home</a></li>
  <li><a [routerLink]="['/about']">About</a></li>
</ul>

有時候,我們會在當前頁面的連結上,會加上指定的類別以套用特殊的樣式讓使用者知道現在在哪一頁,這時候我們還可以另外加上 [routerLinkActive] , Angular 的路由機制會自動幫我們加上該類別。像是:

<ul>

  <li>
    <a 
      routerLink="/home"
      routerLinkActive="active"
    >
      Home
    </a>
  </li>
  
  <li>
    <a 
      routerLink="/about"
      routerLinkActive="active"
    >
      About
    </a>
  </li>
  
</ul>

並且在 app.component.css 裡加上樣式的設定:

.active {
  background-color: red;
}

畫面就會變成:

Imgur

今天就先到這邊,我們明天見!


上一篇
[Angular 深入淺出三十天] Day 18 - 路由(一)
下一篇
[Angular 深入淺出三十天] Day 20 - 路由(三)
系列文
Angular 深入淺出三十天33

尚未有邦友留言

立即登入留言