[Angular] Router 的 resetConfig 方法

這次要介紹的是 Router 的 resetConfig 方法,這個方法可以讓我們動態的設定路由。以下就詳細的介紹一下

resetConfig

resetConfig(config: Routes) : void

Resets the configuration used for navigation and generating links.

1
2
3
4
5
6
7
router.resetConfig([
{ path: 'team/:id', component: TeamCmp,
children: [
{ path: 'simple', component: SimpleCmp },
{ path: 'user/:name', component: UserCmp }
]}
]);

我們可以透過這樣子的方式,重新設定路由的規則。

這裡有個地方要注意的是,如果所指定的 component 沒有在現有的路由規則中使用時,則需要再 ngModule的設定檔內的 entryComponents 設定,而這裡也跟要動態產生 component 的情況是一樣的。

進階使用法

那可不可以從 server 端下載路由的設定檔,答案是可以的,但是這裡需要留意的是,從 server 取下來的設定檔,裡面的 component 是文字型態,而路由設定檔的 component 是不能接受文字,只能接受 componentType 型態

所以要從 Angular 的應用程式裡面取得 componentType 的方式,可以參考以下的程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { Component, OnInit, ComponentFactoryResolver } from '@angular/core';
...
class AppComponent implements OnInit {

factories = [];
constructor(private http: Http,
private router: Router,
private resolver: ComponentFactoryResolver) {
// resolver['_factories'] 可取到 ngModule 裡 bootstrap,
// entryComponents 裡定義的 Component
this.factories = Array.from(this.resolver['_factories'].values());
}

ngOnInit() {
...
this.http.get('./routes.json').map(res => res.json())
.subscribe(data => {
...
this.router.resetConfig(this.processRoute(data));
})
}

processRoute(routes: any[]) {
let _finalRoutes = [];
routes.forEach(r => {
// 根據 componentType 的名稱取回對應的 componentType
let factory: any = this.factories.find((x: any) =>{
return x.componentType.name === r.component;
});
_finalRoutes.push({
path: r.path,
component: factory.componentType
})
})
return _finalRoutes;
}
}

以上的寫法,就可以完成從 server 端取得路由設定檔後並更新 Angular 應用程式的路由設定檔,希望這段程式碼對你們有幫助

參考資料

API