介紹
Angular 應用程式在現今非常常見。它們是基於 單頁應用程式 (SPA) 的概念構建的。在此類應用程式中，網頁之間的路由與傳統網站不同，因為使用的是元件。在 Angular 中，您需要使用 RouterLink 進行導航以在應用程式中進行路由。RouterLink 是一個指令，它提供了 Router.navigate 和 Router.navigateByURL 方法來在元件類別之間進行導航。
在本教學中，我們將 探討 RouterLink, Router.navigate, 和 Router.navigateByURL 以及程式碼 範例.
RouterLink
在 HTML 中，連結通常是使用錨點標籤 <a> 來插入，如下所示：
|
1 2 3 |
<a href="/sample"> HTML 連結範例。 </a> |
此範例連結將引導使用者至 /sample 頁面。然而，如上所述，單頁應用程式 (SPA) 並沒有不同的頁面可供連結。相反地，它具有不同的檢視或元件來顯示給使用者。
如果您需要允許使用者導航並變更檢視，您必須使用 RouterLink 指令，而不是 href:
|
1 2 3 |
<a routerLink="/users/example"> 使用字串的連結。 </a> |
此 RouterLink 範例將引導使用者至位於 /users/example 的元件。不同的 URL 段也可以像以下範例一樣在陣列中傳遞：
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> 一個範例，關於 帶有 連結的陣列. </a> |
這兩個範例的格式不同，但仍會被導向至位於 /users/example.
-
相對路徑
RouterLink 允許指定相對 URL。我們可以使用 ../ 來返回更高層級的導航。以下是我們如何實現這一點：
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> 返回上一層級的連結。 </a> |
在上面的範例中，如果使用者位於 /users/posts，導航將引導使用者至 /posts/parent。您也可以使用 ./, ../ 來相對指定 URL，或者如果需要的話，甚至不使用前導斜線。
-
參數
在某些情況下，您可能需要在路由之間傳遞資料。一個簡單的範例是，當使用者填寫表單時，您引導他前往表單的下一部分以填寫進一步的詳細資訊。
若要傳入參數，需在 URL 段清單中傳遞一個封裝了資料的物件：
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> 帶有參數的連結。 </a> |
在上方， Router 將導航至 /users;display=sample/xyz.
-
具名出口
具名路由器出口（named router outlets）簡單來說就是具有名稱的路由器出口。讓我們來看看相關的程式碼：
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> 帶有側邊出口的連結。 </a> |
在該範例中， xyz 段將被放置在名為 side 的出口中。我們也可以像下面這樣指定多個具名出口：
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> 帶有第一和第二出口的連結。 </a> |
這將會把 first 段替換為 abc ，並將 second 段替換為 xyz.
Router
在 Angular 中， Router 類別用於定義路由並在其中進行導航。這是透過兩種方法來實現的： Router.navigate 以及 Router.navigateByUrl。這兩種方法都會返回一個 Promise。此 Promise 可以有三個值： true, false，或 null.
-
值為 true，當導航成功時。
-
值為 null，當沒有進行導航時。
-
以及 false，如果因為某些原因導航失敗。
如果您想在應用程式中使用這些方法，您首先需要將 Router 類別匯入到您的組件類別中：
|
1 |
import { Router } from '@angular/router'; |
接下來，您需要在建構函式中將此 Router 注入到依賴項中：
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
完成此設定後，您就可以在應用程式中使用 Router.navigate 以及 Router.navigateByUrl 方法了。
Router.navigate
該 Router.navigate 方法接受一個 URL 片段陣列。讓我們來看一個 Router.navigate 程式碼的基本範例：
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
最後，讓我們來看看 Router.navigateByUrl。此方法類似於 Router.navigate，但它不接受 URL 片段，而是接受一個指定 URL 的字串。此導航必須是絕對路徑，且開頭必須有 / 在它的開頭：
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
上述程式碼將引導使用者至 /users;all=true 頁面。
結論
在本教學中，我們介紹了如何使用 RouterLink 在 Angular 應用程式中進行導航。由於是單頁面應用程式，Angular 應用程式中的路由與傳統的網頁應用程式有些許不同。了解 RouterLink 及其功能可以幫助開發人員建立穩健的路由。
Angular 應用程式使用 Node.js 作為其執行環境。如果您想了解更多關於 Node.js 以及如何部署 Node.js 應用程式的資訊，可以參考以下教學：
- 如何在 Ubuntu 18.04 上安裝 Node.js
- 設定 Node.js 應用程式：如何在 Ubuntu 20.04 上使用 Node.js 執行生產任務
- 如何使用 Docker 在 Ubuntu 20.04 上部署 Node.js (Express.js) 應用程式
祝您使用愉快！
留言
目前尚無留言。成為第一個留言的人吧。