Angular 教程：在單頁面應(yīng)用中導(dǎo)航

在單頁面應(yīng)用中使用 Angular 路由

本教程將介紹如何構(gòu)建一個使用多個 Angular 路由的單頁面應(yīng)用 SPA。

在 SPA（Single Page Application 單頁面應(yīng)用）中，所有應(yīng)用的所有功能都存在于同一個 HTML 頁面中。當(dāng)用戶訪問應(yīng)用的各種特性時，瀏覽器只需渲染那些用戶需要關(guān)心的部分，而不用重新加載頁面。這種模式可以顯著改善應(yīng)用的用戶體驗。

為了定義用戶如何在應(yīng)用中導(dǎo)航，你可以使用路由?？梢蕴砑右恍┞酚蓙矶x用戶如何從應(yīng)用的某個部分導(dǎo)航到另一部分。也可以配置一些路由來防范意外或未經(jīng)授權(quán)的行為。

要探索本教程的范例應(yīng)用，請參閱現(xiàn)場演練 / 下載范例。

目標(biāo)

• 將范例應(yīng)用的各個特性組織到一些模塊中。
• 定義如何導(dǎo)航到組件。
• 使用參數(shù)把信息傳給組件。
• 通過嵌套多個路由來構(gòu)造路由體系。
• 檢查用戶是否可以訪問路由。
• 控制該應(yīng)用是否可以放棄未保存的更改。
• 通過預(yù)先獲取路由數(shù)據(jù)和惰性加載特性模塊來提高性能。
• 需要特定的條件來加載組件。

創(chuàng)建一個范例應(yīng)用

使用 Angular CLI，創(chuàng)建一個新的應(yīng)用angular-router-sample。這個應(yīng)用程序有兩個組件：crisis-list和heroes-list。

1. 創(chuàng)建一個新的 Angular 項目 angular-router-sample。

ng new angular-router-sample

當(dāng)系統(tǒng)提示 ?Would you like to add Angular routing?? 時，選擇 ?N?。

當(dāng)系統(tǒng)提示 ?Which stylesheet format would you like to use?? 時，選擇 ?CSS?。

一段時間后，一個新項目 ?angular-router-sample? 就準(zhǔn)備就緒了。

2. 在終端上，導(dǎo)航到 ?angular-router-sample? 目錄。
3. 創(chuàng)建一個組件 crisis-list。

ng generate component crisis-list

4. 在你的代碼編輯器中，找到文件 ?crisis-list.component.html? 并用如下 HTML 替換占位符內(nèi)容。

<h3>CRISIS CENTER</h3>
<p>Get your crisis here</p>

5. 創(chuàng)建第二個組件 ?heroes-list?。

ng generate component heroes-list

6. 在你的代碼編輯器中，找到 ?heroes-list.component.html? 文件，并用如下 HTML 替換占位符內(nèi)容。

<h3>HEROES</h3>
<p>Get your heroes here</p>

7. 在你的代碼編輯器中，打開文件 ?app.component.html? 并用如下 HTML 替換其內(nèi)容。

<h1>Angular Router Sample</h1>
<app-crisis-list></app-crisis-list>
<app-heroes-list></app-heroes-list>

8. 運行 ?ng serve? 來驗證新應(yīng)用是否正常運行。

ng serve

9. 打開瀏覽器訪問 ?http://localhost:4200?。

你會看到一個網(wǎng)頁，它由一個標(biāo)題和兩個組件的 HTML 組成。

從 @angular/router 導(dǎo)入 RouterModule

路由允許你根據(jù) URL 路徑顯示應(yīng)用的特定視圖。要把這個功能添加到你的范例應(yīng)用中，你需要更新 ?app.module.ts? 文件以使用模塊 ?RouterModule?。你可以從 ?@angular/router? 導(dǎo)入該模塊。

1. 在代碼編輯器中，打開 ?app.module.ts? 文件。
2. 添加如下 ?import ?語句。

import { RouterModule } from '@angular/router';

定義你的各個路由

在本節(jié)中，你將定義兩個路由：

• 路由 ?/crisis-center? 用來打開 ?crisis-center? 組件。
• 路由 ?/heroes-list? 用來打開 ?heroes-list? 組件。

路由定義是一個 JavaScript 對象。每個路由通常都有兩個屬性。第一個屬性 ?path ?是一個字符串，它指定路由的 URL 路徑。第二個屬性 ?component ?是組件類，它指定應(yīng)用要為該路由顯示哪個組件。

1. 在代碼編輯器中，打開 ?app.module.ts? 文件。
2. 找到 ?@NgModule()? 部分。
3. 用如下代碼替換這部分的 ?imports ?數(shù)組。

imports: [
  BrowserModule,
  RouterModule.forRoot([
    {path: 'crisis-list', component: CrisisListComponent},
    {path: 'heroes-list', component: HeroesListComponent},
  ]),
],

這段代碼把 ?RouterModule ?添加到了 ?imports ?數(shù)組中。接下來，該代碼使用 ?RouterModule ?的 ?forRoot()? 方法來定義你的兩個路由。該方法接受一個 JavaScript 對象數(shù)組，每個對象定義一個路由的屬性。?forRoot()? 方法確保你的應(yīng)用只會實例化一個 ?RouterModule?。

更新你的組件以添加 router-outlet

此刻，你已經(jīng)為應(yīng)用定義了兩個路由。但是，你的應(yīng)用仍然在你的 ?app.component.html? 模板中硬編碼著 ?crisis-list? 和 ?heroes-list? 組件。為了讓你的路由正常工作，需要更新模板，以便根據(jù) URL 路徑動態(tài)加載一個組件。

要實現(xiàn)這個功能，你就可以把 ?router-outlet? 指令添加到模板文件中。

1. 在代碼編輯器中，打開 ?app.component.html? 文件。
2. 刪除下面這幾行。

<app-crisis-list></app-crisis-list>
<app-heroes-list></app-heroes-list>

3. 添加 ?router-outlet? 指令。

<router-outlet></router-outlet>

在瀏覽器中查看更新后的應(yīng)用。你應(yīng)該只看到應(yīng)用標(biāo)題。要查看 ?crisis-list? 組件，就要把 ?crisis-list? 添加到瀏覽器地址欄的路徑末尾。比如：

http://localhost:4200/crisis-list

注意，?crisis-list? 組件會顯示出來。Angular 正在使用你定義的路由來動態(tài)加載組件。你可以用同樣的方法加載 ?heroes-list? 組件：

http://localhost:4200/heroes-list

用 UI 元素控制導(dǎo)航

目前，你的應(yīng)用支持兩種路由。但是目前使用這些路由的唯一方法是讓用戶在瀏覽器的地址欄中手動輸入路徑。在本節(jié)中，你要添加兩個鏈接，用戶可以單擊它們在 ?heroes-list? 和 ?crisis-list? 組件之間導(dǎo)航。你還會添加一些 CSS 樣式。雖然這些樣式不是必需的，但它們可以讓你更容易的識別出當(dāng)前顯示的組件的鏈接。你將在下一節(jié)中添加此功能。

1. 打開 ?app.component.html? 文件，在標(biāo)題下方添加以下 HTML。

<nav>
  <a class="button" routerLink="/crisis-list">Crisis Center</a> |
  <a class="button" routerLink="/heroes-list">Heroes</a>
</nav>

這個 HTML 使用了 Angular 指令 ?routerLink?。該指令將你定義的路由連接到模板文件中。

2. 打開 ?app.component.css? 文件并添加如下樣式。

.button {
    box-shadow: inset 0 1px 0 0 #ffffff;
    background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
    outline: 0;
}
.activebutton {
    box-shadow: inset 0 1px 0 0 #dcecfb;
    background: #bddbfa linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
    border-radius: 6px;
    border: 1px solid #84bbf3;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #528ecc;
    outline: 0;
}

如果你在瀏覽器中查看應(yīng)用，你會看到這兩個鏈接。單擊某個鏈接時，會出現(xiàn)相應(yīng)的組件。

標(biāo)出活動路由

雖然用戶可以使用上一節(jié)中添加的鏈接來瀏覽你的應(yīng)用，但他們并沒有簡單的方法來確定活動路由是什么?？梢杂?nbsp;Angular 的 ?routerLinkActive ?指令添加這個功能。

1. 在代碼編輯器中，打開 ?app.component.html? 文件。
2. 更新 a 標(biāo)簽以包含 ?routerLinkActive ?指令。

<nav>
  <a class="button"
     routerLink="/crisis-list"
     routerLinkActive="activebutton"
     ariaCurrentWhenActive="page">
    Crisis Center
  </a> |
  <a class="button"
     routerLink="/heroes-list"
     routerLinkActive="activebutton"
     ariaCurrentWhenActive="page">
    Heroes
  </a>
</nav>

再次查看你的申請表。單擊其中一個按鈕時，該按鈕的樣式會自動更新，并為該用戶標(biāo)出該活動組件。通過添加 ?routerLinkActive ?指令，可以通知你的應(yīng)用把一個特定的 CSS 類應(yīng)用到當(dāng)前的活動路由中。在本教程中，這個 CSS 類是 ?activebutton?，但你可以使用任何想要的類。

請注意，我們還為 ?routerLinkActive ?的 ?ariaCurrentWhenActive ?指定了一個值。這可確保視障用戶（他們可能無法感知正在應(yīng)用的不同樣式）也可以識別活動按鈕。

添加一個重定向

在本教程的這一步中，你將添加一個重定向路由來把用戶導(dǎo)向 ?/heroes-list? 組件。

1. 在代碼編輯器中，打開 ?app.module.ts? 文件。
2. 在 ?imports ?數(shù)組中，按如下所示更新 ?RouterModule ?部分。

imports: [
  BrowserModule,
  RouterModule.forRoot([
    {path: 'crisis-list', component: CrisisListComponent},
    {path: 'heroes-list', component: HeroesListComponent},
    {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
  ]),
],

注意這個新路由使用一個空字符串作為它的路徑。另外，它還把 ?component ?屬性替換成了這兩個新屬性：

現(xiàn)在，當(dāng)你打開應(yīng)用時，它會默認顯示 ?heroes-list? 組件。

添加 404 頁面

用戶可以嘗試訪問你尚未定義的路由。為了解決這個問題，最佳做法是顯示一個 404 頁面。在本節(jié)中，你將創(chuàng)建一個 404 頁面，并更新路由配置，以便為任何未指定的路由顯示該頁面。

1. 在終端上，創(chuàng)建一個新的組件 ?PageNotFound?。

ng generate component page-not-found

2. 在代碼編輯器中，打開 ?page-not-found.component.html? 文件并用下面的 HTML 替換它的內(nèi)容。

<h2>Page Not Found</h2>
<p>We couldn't find that page! Not even with x-ray vision.</p>

3. 打開 ?app.module.ts? 文件。在其 ?imports ?數(shù)組中，按如下所示更新 ?RouterModule ?部分的內(nèi)容。

imports: [
  BrowserModule,
  RouterModule.forRoot([
    {path: 'crisis-list', component: CrisisListComponent},
    {path: 'heroes-list', component: HeroesListComponent},
    {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
    {path: '**', component: PageNotFoundComponent}
  ]),
],

新路由使用路徑 ?**?。這個路徑是 Angular 表示通配符路由的方式。任何與你配置中的路由都不匹配的路由都會使用這個路由。

請注意，通配符路由要放在數(shù)組的末尾。路由的順序很重要，因為 Angular 會按順序應(yīng)用路由并使用所找到的第一個匹配項。

嘗試導(dǎo)航到應(yīng)用中不存在的路由，比如 ?http://localhost:4200/powers?。此路由與 ?app.module.ts? 文件中定義的所有內(nèi)容都不匹配。但是，由于你定義了一個通配符路由，該應(yīng)用會自動顯示你的 ?PageNotFound ?組件。