雖然“快速上手：“英雄指南”教程介紹了 Angular 中的一般概念，而本篇 “路由器教程”詳細(xì)介紹了 Angular 的路由能力。本教程將指導(dǎo)你在基本的路由器配置之上，創(chuàng)建子路由、讀取路由參數(shù)、惰性加載 NgModules、路由守衛(wèi)，和預(yù)加載數(shù)據(jù)，以改善用戶體驗(yàn)。

概覽

本章要講的是如何開發(fā)一個(gè)帶路由的多頁面應(yīng)用。 接下來會(huì)重點(diǎn)講解了路由的關(guān)鍵特性，比如：

• 把應(yīng)用的各個(gè)特性組織成模塊。

• 導(dǎo)航到組件（Heroes 鏈接到“英雄列表”組件）。

• 包含一個(gè)路由參數(shù)（當(dāng)路由到“英雄詳情”時(shí)，把該英雄的 id 傳進(jìn)去）。

• 子路由（危機(jī)中心特性有一組自己的路由）。

• CanActivate 守衛(wèi)（檢查路由的訪問權(quán)限）。

• CanActivateChild 守衛(wèi)（檢查子路由的訪問權(quán)限）。

• CanDeactivate 守衛(wèi)（詢問是否丟棄未保存的更改）。

• Resolve 守衛(wèi)（預(yù)先獲取路由數(shù)據(jù)）。

• 惰性加載一個(gè)模塊。

• CanLoad 守衛(wèi)（在加載特性模塊之前進(jìn)行檢查）。

就像你正逐步構(gòu)建應(yīng)用一樣，本指南設(shè)置了一系列里程碑。不過這里假設(shè)你已經(jīng)熟悉了 Angular 的基本概念。有關(guān) Angular 的一般性介紹，參見 快速上手。有關(guān)更深入的概述，請(qǐng)參閱“英雄指南”教程。

范例程序?qū)崙?zhàn)

本教程的示例應(yīng)用會(huì)幫助“英雄職業(yè)管理局”找到需要英雄來解決的危機(jī)。

本應(yīng)用具有三個(gè)主要的特性區(qū)：

1. 危機(jī)中心用于維護(hù)要指派給英雄的危機(jī)列表。

1. 英雄區(qū)用于維護(hù)管理局雇傭的英雄列表。

1. 管理區(qū)會(huì)管理危機(jī)和英雄的列表。

該應(yīng)用會(huì)渲染出一排導(dǎo)航按鈕和和一個(gè)英雄列表視圖。

選擇其中之一，該應(yīng)用就會(huì)把你帶到此英雄的編輯頁面。

修改完名字，再點(diǎn)擊“后退”按鈕，應(yīng)用又回到了英雄列表頁，其中顯示的英雄名已經(jīng)變了。注意，對(duì)名字的修改會(huì)立即生效。

另外你也可以點(diǎn)擊瀏覽器本身的后退按鈕（而不是應(yīng)用中的 “Back” 按鈕），這也同樣會(huì)回到英雄列表頁。 在 Angular 應(yīng)用中導(dǎo)航也會(huì)和標(biāo)準(zhǔn)的 Web 導(dǎo)航一樣更新瀏覽器中的歷史。

現(xiàn)在，點(diǎn)擊危機(jī)中心鏈接，前往危機(jī)列表頁。

選擇其中之一，該應(yīng)用就會(huì)把你帶到此危機(jī)的編輯頁面。 危機(jī)詳情是當(dāng)前頁的子組件，就在列表的緊下方。

修改危機(jī)的名稱。 注意，危機(jī)列表中的相應(yīng)名稱并沒有修改。

這和英雄詳情頁略有不同。英雄詳情會(huì)立即保存你所做的更改。 而危機(jī)詳情頁中，你的更改都是臨時(shí)的 —— 除非按“保存”按鈕保存它們，或者按“取消”按鈕放棄它們。 這兩個(gè)按鈕都會(huì)導(dǎo)航回危機(jī)中心，顯示危機(jī)列表。

單擊瀏覽器后退按鈕或 “Heroes” 鏈接，可以激活一個(gè)對(duì)話框。

你可以回答“確定”以放棄這些更改，或者回答“取消”來繼續(xù)編輯。

這種行為的幕后是路由器的 CanDeactivate 守衛(wèi)。 該守衛(wèi)讓你有機(jī)會(huì)進(jìn)行清理工作或在離開當(dāng)前視圖之前請(qǐng)求用戶的許可。

Admin 和 Login 按鈕用于演示路由器的其它能力，本章稍后的部分會(huì)講解它們。