Angular複習筆記7-路由（下）

 

Angular複習筆記7-路由（下）

這是angular路由的第二篇，也是最後一篇。繼續上一章的內容

路由跳轉

Web應用中的頁面跳轉，指的是應用響應某個事件，從一個頁面跳轉到另外一個頁面的行爲。對於使用Angular構建的單頁應用而言，頁面跳轉實質上就是從一個配置項跳轉到另外一個配置項的行爲。頁面跳轉流程以下圖所示，當某個事件引起了跳轉時，Angular會根據跳轉時的參數生成一個UrlTree實例來和配置項進行匹配，若是匹配成功，則顯示相應的組件並將新URL更新在瀏覽器地址欄中；若是匹配不成功，則報錯。本節將對Angular應用中進行頁面跳轉的兩種方式進行介紹。

 

 使用指令進行跳轉

指令跳轉經過使用RouterLink指令來完成。該指令接收一個連接參數數組，Angular將根據該數組來生成UrlTree實例進行跳轉。

若是不借助於RouterLink指令而以純HTML的方式來定義超連接，所致使的結果是單擊超連接後會使得整個頁面被從新加載。

RouteLink的一個強大之處在於能夠用在任何的HTML元素上。使得頁面跳轉不須要超連接。

此外，當RouterLink被激活時，還能夠經過RouterLinkActive指令爲其相應的HTML元素指定CSS類。下面的例子定義了一個CSS類.active，並經過routerLinkActive將其賦給收藏頁的連接。當單擊該連接後，.active類將被應用到＜a＞標籤上。示例代碼以下：

RouterLinkActive指令除能夠做用於routerLink所在的元素以外，還能夠做用於這些元素的任意祖先元素。當該祖先元素下的任意routerLink處於激活狀態時，該祖先元素都將得到routerLinkActive指定的CSS類。下面的例子無論當前是處於聯繫人列表頁仍是收藏頁，＜nav＞標籤都將得到.active類。示例代碼以下：

使用代碼跳轉

RouterLink僅僅相應click事件，若是須要其餘形式的跳轉，在可使用Router對象的Router.navigateByUrl()或其兄弟方法Router.navigate()來完成。下面的例子實現了在進入聯繫人列表頁1秒後自動跳轉到收藏頁的功能。示例代碼以下：

Router.navigateByUrl()和Router.navigate()的不一樣之處在於傳入的參數不一樣，前者須要傳入一個表示url的字符串或UrlTree類型的參數，後者和RouterLink指令同樣，須要一個連接參數數組。

這兩個方法除能夠經過第一個參數來指定目標配置項外，還支持用extras參數定義跳轉的具體行爲。例如，若是想在不改變URL的狀況下完成跳轉，則能夠經過如下代碼來完成：

關於extras參數的其餘用法，感興趣的讀者能夠參考官方文檔來了解更多的內容，在此再也不贅述。

路由參數

在「組件」章節中介紹瞭如何使用@Input裝飾器向組件傳遞數據，除此以外，Angular路由還提供了路由參數的功能，容許經過URL向組件傳遞數據。

path參數

顧名思義，Path參數是經過解析URL的path部分來獲取參數的。在定義一個配置項的path屬性時，可使用「/」字符來對path屬性進行分段，若是一個分段以「：」字符開頭，則URL中與該分段進行匹配的部分將做爲參數傳遞到組件中。下面的代碼爲聯繫人詳情頁的路由配置項，其定義了一個名爲id的Path參數，對於http：//localhost：3000/detail/1，參數id的值爲1；對於http：//localhost：3000/detail/2，參數id的值則爲2；依此類推。

本例中path的分段數是2，只有URL解析出來的分段數和path的分段數一致時，才能獲得匹配。

給路由參數賦值，除能夠直接在瀏覽器地址欄中輸入URL外，還能夠經過RouterLink指令或者跳轉方法來完成：

在組件中獲取Path參數，須要導入ActivatedRoute服務，該服務提供了兩種方式，分別適用於不一樣頁面間跳轉和同一頁面內跳轉。

Angular應用從一個頁面跳轉到另外一個新的頁面，實質上是從一個配置項跳轉到另外一個配置項。在這個過程當中，Angular除會爲配置項所對應的組件建立實例外，還會爲該配置項自己建立一個ActivatedRoute實例來表示該配置項已被激活。該ActivatedRoute實例包含了一個快照（即snapshot屬性），記錄了從當前URL中解析出來的全部Path參數。下面展現了通信錄例子中的DetailComponent組件是如何經過快照來獲取Path參數的。示例代碼以下：

此時經過http：//localhost：3000/detail/1直接訪問聯繫人詳情頁，能夠在瀏覽器控制檯上看到以下輸出，則表示經過快照獲取到的值是正確的。

建立DetailComponent組件實例

參數id的值爲：1

可是當Angular在處理同一頁面內跳轉時，不會從新建立組件的實例，因此組件的構造函數和ngOnInit（）方法都沒有被調用到。爲了解決這個問題，ActivatedRoute服務提供了一個Observable對象，容許對參數的更新進行訂閱。示例代碼以下：

Query參數

咱們也能夠經過解析URL的query部分來獲取參數值。因爲URL的query部分不用於和配置項進行匹配，所以每個配置項均可以擁有任意多個查詢參數。下面的URL給聯繫人列表頁定義了一個查詢參數，表示只但願在頁面上顯示5位聯繫人。

http://localhost:3000/list?limit=5

與Path參數相似，Query參數一樣能夠經過RouterLink指令或者跳轉方法來賦值。示例代碼以下：

Query參數的獲取，須要藉助於ActivatedRoute服務提供的Observable類型對象queryParams來完成。下面的代碼片斷展現瞭如何使用這個對象。

Matrix參數

頁面上全部組件均可以訪問Query參數的內容，若是想精準地向某一個組件傳遞參數，則須要使用Matrix參數。

Angular提供了Matrix參數，它經過在連接參數數組中插入一個對象來進行賦值。示例代碼以下：

Angular會將該對象的屬性轉化爲以「；」爲分隔符的鍵值對，拼接到與該對象左邊最近的URL分段上。依據上述連接參數數組生成的URL以下，DetailComponent組件和AlbumComponent組件都將得到不一樣的參數值：http://localhost:3000/detail/6;after=2015-01-01;before=2015-12-31/album;after=2016-01-01;before=2016-12-31

這種在一個URL分段內使用「；」分隔鍵值對的方式稱爲MatrixURI，由互聯網之父TimBerners-Lee於1996年提出。根據其定義，每個URL分段均可以擁有任意多個鍵值對，每一個鍵值對只爲其所在的分段服務。雖然MatrixURI一直沒有進入HTML標準，但它可以清晰地表示出每個URL分段所具備的鍵值對。Angular利用這個特性，將Matrix參數精準地傳遞給分段所對應的組件。Matrix參數的獲取方式和Path參數同樣，能夠經過ActivatedRoute服務提供的快照和Observable對象兩種方式來獲取，在此再也不贅述。

路由攔截

Angular的路由攔截容許在從一個配置項跳轉到另外一個配置項以前執行指定的邏輯，並根據執行的結果來決定是否進行跳轉。Angular提供了五類路由攔截：

• CanActivate，激活攔截。
• CanActivateChild，與CanActivate相似，用於控制是否容許激活子路由配置項。
• CanDeactivate，反激活攔截。
• Resolve，數據預加載攔截。
• CanLoad，模塊加載攔截。

關於路由攔截的內容會新開一個專題篇來說述這個功能的方方面面，這裏先不贅述。

模塊的延遲加載

前文提到，Angular應用由一個根模塊和任意多個特性模塊組成。一個大型Web應用一般會包含爲數很多的特性模塊，若是在首屏加載時便將全部的特性模塊加載進來，對於用戶體驗和服務器負載均會有所影響。爲此，Angular路由提供了對特性模塊進行延遲加載的支持，使得只有在真正須要某一個模塊的時候，纔將其加載進來。
與根模塊須要初始化各項路由服務不一樣，特性模塊僅須要對其路由配置進行解析，所以子路由模塊經過調用RouterModule.forChild（）方法來建立。示例代碼以下：

最後，還須要對根模塊的路由配置進行修改：

 loadChildren指定了延遲加載模塊的路徑，井號「＃」後面的表示模塊類名。當用戶訪問地址/operate時，Angular纔會加載operate.module.ts這個模塊。

模塊預加載

延遲加載使得首屏加載的資源包的大小減少不少，這些模塊只在用戶觸發的時候纔開始加載。但對於某些模塊來講，觸發時才加載可能不是最優的解決方案。這樣的模塊雖然不須要首屏加載，但可能有很大的機率用戶會訪問使用到，所以最好不用等待用戶觸發，而是在首屏資源加載完後當即加載，這種加載模式就叫做預加載。預加載的模塊首先得是一個延遲加載的模塊，讓全部延遲加載的模塊加上預加載功能很是簡單，只需在根模塊的RouterModule中添加一個preloadingStrategy配置項便可。示例代碼以下：

加上這個配置後，全部的延遲加載模塊將再也不等待用戶觸發，而是等待首屏資源加載完後當即加載。不過，這樣的配置顯然不夠靈活，更好的方式是對預加載的策略作自定義配置。開發者能夠經過實現Angular提供的PreloadingStrategy接口自定義預加載策略。首先定義一個服務，並實現PreloadingStrategy接口。示例代碼以下：

preload（）方法的返回類型必須是一個Observable對象，Angular會遍歷每個route對象並執行preload（）函數，以此來判斷該route對應的模塊是否須要進行預加載。它接受兩個參數：

route：當前處理中的route對象。

load：內置異步模塊加載器函數。上面這個例子直接返回Observable.of（null），表示不進行預加載。

MyPreloadingStrategy這個服務的目的是進行有選擇的預加載，能夠根據route對象裏的data屬性提供的信息進行判斷。示例代碼以下：

 若是data對象裏設置了preload爲true，preload函數即返回load（）加載器函數，這表示該路由對應的模塊須要進行預加載。這個MyPreloadingStrategy服務已經完成了，下面須要把原來的PreloadAllModules替換成新的MyPreloadingStrategy。示例代碼以下：

而後依據這個規則，控制模塊預加載就變得很是簡單了。在須要預加載的延遲加載路由配置項裏進行配置：

在這個route對象裏設置preload爲true後，OperateModule的加載方式由原來的延遲加載變動爲預加載，而其餘延遲加載模塊並不會受到影響，仍是會等待用戶觸發時才加載。