Angular-第8課-路由的基本觀念
一個網站包含了許多網頁，而每個網頁有不同的網址。這一課要認識「路由」，學習如何定義URL與組件的對應關係，並利用超連結來顯示。
課程關鍵字：#路由（route） #routerLink
一、路由模組
為了能夠做到在各網頁之間遊走的效果，應用程式中會有一個模組，它扮演著類似「服務生」的角色。我們先向餐廳訂位，到餐廳後只要向服務生報上身份，他就會帶我們到座位上。而這個「路由模組」，則是定義好URL和網頁，一旦使用者前往這個URL，就會被導覽到對應的網頁。
首先執行下面的指令，建立一個路由模組。如果一開始建立應用程式專案時有選擇加入路由，可以略過這一步。
ng generate module 路由模組名稱 --flat --module=appng generate module app-routing --flat --module=app
打開/app/app-routing-module.ts，如果是透過指令建立的，內容應該長得像這樣子：
請把內容改成像下面這樣：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';const routes: Routes = [];@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
「Routes」這個類別可用來定義URL與對應網頁的組合，就像客人與訂位桌號的關係。此處宣告了一個陣列，用來做為路由目的地的集合，讓Angular能夠像查表那樣來對照。這個在下一節會進行定義，屆時就能更了解了。
在@NgModule標記中的imports陣列，需要提供配置好的「路由器」。只要使用「RouterModule」模組的「forRoot」方法，就能得到一個初始化後的路由器。最後在exports陣列，導出RouterModule，讓路由模組的指令可以在組件被使用。
二、定義路由
在app-routing-module.ts中，宣告了一個routes陣列，它是用來存放URL與網頁的組合。如果要講得更精確，應該說「URL與組件」才對。在Angular，路由器會根據使用者前往的URL，來顯示對應的組件畫面。
若希望當網址是「localhost:4200/heroes」時，就顯示HeroesComponent組件，請像這樣子在routes陣列中添加一個物件：
{ path: '網址路徑', component: 組件 }{ path: 'heroes', component: HeroesComponent }
path屬性是從網站的「根路徑」開始算，而不是整串URL。至於component屬性則是該網址路徑所對應要顯示的組件。
這樣子就設定完成了。接下來請開啟app.component.html，將原本放置HeroesComponent的地方改成「<router-outlet></router-outlet>」。這是被路由到的組件所要顯示的位置。
儲存後瀏覽器會重新整理，在一開始的畫面，我們發現HeroesComponent和MessageComponent都不見了！原因是Heroes組件只有在使用者路由到正確的URL時才會被創建。如果手動在瀏覽器網址加上「/heroes」，先前的hero清單才會在「<router-outlet>」的位置顯示。
由於當初Heroes組件未被創建，連帶使得MessageService中沒有資料，導致Messages組件也沒出現。但它其實還是存在的，只是html檔的「ngIf」敘述，讓它在沒資料時不顯示裡面的內容罷了。這點可以透過把原先的<h2>標題文字移動到ngIf外面來確認。
三、超連結
網頁上會有許多「超連結」，可能是文字、按鈕或圖片等，點選它們能移動到另一個網頁。這一節要在應用程式的起始畫面加上超連結，這樣就不需要藉由輸入URL的方式來移動。
在HTML，超連結的語法是像這樣子：
<a href="要前往的網址">超連結文字</a><a href="https://www.google.com/">Google首頁</a>
但如果要透過Angular路由模組的幫助，做法就有一點點不同了。請開啟app.component.html，在<router-outlet>的上方加入一個超連結，文字顯示「Heroes」，並用「<nav>」標籤包起來：
<a routerLink="要前往的網址">超連結文字</a><nav>
<a routerLink="/heroes">Heroes</a>
</nav>
兩者的差別在於定義URL的屬性，Angular是使用「routerLink」，這是由第一節匯入的RouterModule模組所提供的屬性。而<nav>標籤是用來管理超連結的。
儲存後，畫面上會出現一個「Heroes」超連結，點擊後發現瀏覽器的網址跳轉了，Heroes組件也隨之出現。
最後請在app.component組件套用新的CSS樣式，使畫面好看一些：
/* AppComponent's private CSS styles */
h1 {
font-size: 1.2em;
color: #999;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
padding-top: 0;
}
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607d8b;
}
nav a:hover {
color: #039be5;
background-color: #cfd8dc;
}
nav a.active {
color: #039be5;
}
