摘要：模塊主要解決程序路由狀態(tài)改變和懶加載模塊問題。本文主要解釋程序啟動后，是如何注冊開發(fā)者定義的路由集合的，和實(shí)例化對象的。第六個(gè)重要的對象就是，提供了初始導(dǎo)航功能。

@angular/router 模塊主要解決程序路由狀態(tài)改變和懶加載模塊問題。

比如，程序從路由狀態(tài) state1: /advisors/1/households/1 轉(zhuǎn)變?yōu)槁酚蔂顟B(tài) state2: /advisors/1/accounts/2，需要實(shí)例化的組件集合也從 components1: Advisor+Household 轉(zhuǎn)變?yōu)?components2: Advisor+Account（準(zhǔn)確的說應(yīng)該是先是 Module 的實(shí)例化，然后才是組件的實(shí)例化），這個(gè)過程是如何實(shí)現(xiàn)的？

另外，對于按需加載的模塊，又該如何加載該模塊，并且將該模塊顯示在對應(yīng)位置處？

@angular/router 模塊就是用來解決路由狀態(tài)改變和懶加載模塊問題的。本文主要解釋程序啟動后，@angular/router 是如何注冊開發(fā)者定義的路由集合的，和實(shí)例化 Router 對象的。

程序啟動后，即調(diào)用 PlatformRef.bootstrapModule(AppModule) 后，會執(zhí)行導(dǎo)入的 RouterModule.forRoot(routes: Routes) 來合并 RouterModule 提供的服務(wù)，且 routes 路由集合是由開發(fā)者自定義的，比如：

routes: Routes = [
    {path: "advisors/:id", component: AdvisorComponent, children: [
        {path: "households/:id", component: HouseholdComponent},
        {path: "accounts/:id", component: AccountComponent},
    ]},
];

一起看看 RouterModule 能給我們提供哪些重點(diǎn)對象吧：RouterModule.forRoot(routes)。

第一個(gè)對象是來自于 @angular/common 的 Location，用來表示瀏覽器的 url，并提供了 forward(),back(),go() 等重要方法用來改變 url，同時(shí)提供了 HashLocationStrategy 和 PathLocationStrategy 兩種策略生成是否帶有 "#" 的 url，至于為何需要兩種不同風(fēng)格的 url 原因可以看 中文官網(wǎng)描述；

第二個(gè)對象是序列化 URL 的對象 UrlSerializer，@angular/router 使用 UrlTree 對象存儲一個(gè) URL，比如 "/advisors/1/accounts/2?type=loan#fragment"，并且 UrlTree 對象又使用 UrlSegmentGroup 對象來表示 URL 的 path 部分，這里 UrlSegmentGroup 表示的就是 "/advisors/1/accounts/2" 這部分，UrlSegmentGroup 對象也可以存儲 "/advisors/1/accounts/2/(user/john//bank:abc)?type=loan#fragment" 這樣的多重 URL，該多重 URL 可以表示為兩個(gè) URL: "/advisors/1/accounts/2/user/john?type=loan#fragment" 和 "/advisors/1/accounts/2/abc?type=loan#fragment"(該 URL 的出口 outlet 是 bank)，雖然是多重 URL，但只需要用一個(gè)對象 UrlSegmentGroup 就可以存儲，而 UrlSegmentGroup 又使用 Segment 對象來表示當(dāng)前 group 內(nèi)的每一個(gè) "/" 之間的部分。Url 的格式可見下圖：

對于上圖中的 URL，@angular/router 會調(diào)用 Router.parseUrl()， 實(shí)際上還是調(diào)用 UrlSerializer.parse() 來把 URL 字符串 "/section-one;test=one/(nav:navigation;test=two//main:about;test=three)?query=four#frag" 解析為 UrlTree 對象：

@angular/router 使用 UrlTree 對象來存儲 URL 字符串，并使用 UrlSerializer 來解析和序列化 URL。這塊知識點(diǎn)還是很重要的。

第三個(gè)對象 Router，也是 @angular/router 模塊中最重要的對象，使用 setupRouter 方法來初始化 Router，初始化邏輯主要是它的 構(gòu)造函數(shù)，開發(fā)者自定義的 routes 集合 也是作為依賴來構(gòu)造 Router 對象。第一個(gè)點(diǎn)就是首先調(diào)用 createEmptyUrlTree 方法創(chuàng)建一個(gè) 空的 UrlTree；第二個(gè)點(diǎn)就是實(shí)例化一個(gè)路由加載器 loader，當(dāng)開發(fā)者定義了 route.loadChildren 屬性時(shí)，該 loader 就會使用 loader.load() 方法去異步加載模塊，所以該 loader 對象是用來解決懶加載問題的；第三個(gè)點(diǎn)是調(diào)用 createEmptyState 方法創(chuàng)建一個(gè)空 RouterState，RouterState 對象表示當(dāng)前激活路由的狀態(tài)（RouterState is a tree of activated routes.），它也是一個(gè)樹形數(shù)據(jù)結(jié)構(gòu)，用來存儲 當(dāng)前激活路由 的數(shù)據(jù)，該樹的節(jié)點(diǎn)使用 ActivatedRoute 對象表示，比如對于上文中開發(fā)者定義的路由列表，當(dāng) URL 為 "/advisors/1/households/1" 時(shí)，這時(shí) RouterState 對象表示的狀態(tài)樹，如下紅色顯示部分的子樹，而每一個(gè)包含組件的層級即是 ActivatedRoute：

第四個(gè)點(diǎn)是調(diào)用 processNavigations() 執(zhí)行路由狀態(tài)切換，實(shí)際上 @angular/router 的作用就是控制路由狀態(tài)的切換，所以 整個(gè) @angular/router 的核心代碼就是 processNavigations() 方法。該方法訂閱了一個(gè) BehaviorSubject 對象，只要該 BehaviorSubject 流對象彈射出一個(gè)新值，就會運(yùn)行 executeScheduledNavigation()，不管是不是刷新 URL，都會運(yùn)行 runNavigate()，所以精確的說，runNavigate() 這一百行左右代碼才是 @angular/router 包最最核心的代碼。這一百來行代碼具體分為幾個(gè)步驟：

1. Apply redirects(relative/absolute)

2. Construct router state by current URL（這段也就是第二篇文章將要探討的 查找路由 邏輯）

3. PreActivation: Run Guard 和 3. PreActivation: Run Resolver

4. Activation: Activate Components（這段也就是第三篇文章將要探討的 運(yùn)行路由 邏輯）

第四個(gè)重要的對象就是模塊工廠加載器 NgModuleFactoryLoader，該對象來自于 @angular/core 核心包，主要用來輔助 RouterConfigLoader 對象，懶加載模塊時(shí)可以異步加載遠(yuǎn)程模塊。

第五個(gè)重要的對象就是提供了預(yù)加載對象 RouterPreloader，用來預(yù)加載所有懶加載模塊，從而提高性能。

第六個(gè)重要的對象就是 RouterInitializer，提供了初始導(dǎo)航功能。當(dāng)程序首次初始化和啟動時(shí)，調(diào)用 RouterInitializer.appInitializer() 和 RouterInitializer.bootstrapListener() 來進(jìn)行初始化導(dǎo)航，最后還是調(diào)用 Router.initialNavigation() 來首次導(dǎo)航到 URL 對應(yīng)的 RouterState。

所以，@angular/router 首次初始化時(shí)，提供的最重要對象是 Router，其他一切對象和邏輯都是圍繞著 Router 對象展開。@angular/router 是如何根據(jù)當(dāng)前 URL 查找到對應(yīng)的 route 的呢？見本系列第二篇文章。