[功能介紹-15] Router進階介紹

設定Router Module

若我們的Router設定較為複雜時,可將Router配置為一個Router Module。

首先,設定一個路由模組app-routing.module.ts

接著,更新app.module.ts文件

多層的Router Module

我們在做網站時,會希望每個模組專注在自己的功能上,Router也不例外。因此像英雄列表的元件,如果希望點選列表內容,可以進入該英雄詳細資料的頁面如下:

首先,創建一個pre-routing檔案heroes.module.ts

新增一個heroes-routing.module.ts,內容如下:

將Router Module的檔案放在與其伴隨的模組在相同的文件夾中。這兩個heroes-routing.module.tsheroes.module.ts在同一個src/app/heroes文件夾中。

考慮給每個功能模組自己的路由配置文件。當功能路線很簡單時,看起來可能會過早。但是,路線趨於變得更加複雜,模式的一致性會隨著時間的推移而得到回報。

接著在heroes.module.ts裡導入HeroRoutingModule

path: 'heroes'目前定義在兩個地方:HeroesRoutingModule和AppRoutingModule。
由功能模塊提供的route由Router合併到其導入的模塊的route中。這使您可以繼續定義功能模塊路由,而無需修改主路由配置。

如果不想設定兩次相同的資料,可以把舊的Router設定移除

在應用程式裡面使用AppRoutingModule,打開src/app/app.module.ts:

這邊要注意的是模塊導入順序很重要

當所有的路由都在AppRoutingModule時,我們將通用path: '**'符號的設定放在路由/heroes的後面,這樣路由器才有機會匹配一個URL到/heroes路由,而不會先被AppRoutingModule的這個設定匹配走。

如果Routing在兩個不同的模組內,也是要先載入HeroesModule再載入AppRoutingModule,這樣才會使用HeroesModule裡的路由設定而不會因為在AppRoutingModule找到匹配的通用符號而顯示PageNotFoundComponent。
如果將import的順序倒過來,則會顯示PageNotFoundComponent的頁面。

在程式裡去操控路由器

使用this.router.navigate來在程式內操作路由工作

若需要傳一個參數,則可以用

要傳送兩個參數則如下

點下後出現的連結如下

這個叫做Matrix URL,在URL查詢字符串中,用分號隔開“;” 不同的參數,而不是用&

取得Router的參數

添加換頁效果

首先要載入BrowserAnimationsModule這個動態效果模組。

animations.ts在根src/app/文件夾中創建一個文件。內容如下所示:

然後在src/app/heroes/hero-detail.component.ts增加使用這個動態效果的綁定

Child routing component

子路由元件與直接使用參數去定義路由,Router預設的狀況下,若瀏覽器重新導航到相同的元件時,會重新使用該元件既有的實體,而不會重新創建。因此在物件被重用的狀況下,該元件的ngOnInit只會被呼叫一次,即使是要顯示不同的內容資料。
但是被創建的元件實體會在離開頁面時被銷毀並取消註冊,因此在前面範例的heroes-routing.module.ts檔案中裡,所使用的導航設定方式,由於在瀏覽HeroDetailComponent之後,一定要先回到HeroListComponent,才能進入下一個Detail頁面。

這會造成因為在回到HeroListComponent時已把HeroDetailComponent刪除掉了,再選擇另一個英雄要查看細節時,又會再創立一個新的HeroDetailComponent。因此每次選擇不同的英雄時,組件都會重新創建

如果想要保留頁面的狀態,就可以改使用子路由的方式來定義

下面是使用子路由的範例:

因為CrisisDetailComponentCrisisCenterHomeComponent都是CrisisListComponent的子組件,因此在不同的子組件內的狀態得以被保存,直到頁面切換離開CrisisCenterComponent時才會將元件實體刪除,這可以讓我們在瀏覽不同CrisisDetail時,得以使用到Router預設的重用設定。

使用相對路徑

./ 是在目前的位置。
../ 在上一層的位置。
下面為使用範例

網址認證功能

很多時候某些頁面或許需要登入才可以檢視,有些要登入後具備某些身份才可以開啟該網址,這時候就可以用到Router的CanActivate功能。

下面是src/app/auth-guard.service.ts的內容:

下面是src/app/admin/admin-routing.module.ts的內容

本篇所有範例可見:live demo / download example.

參考資料

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *