## Router 提供導航和url相關操作 ### 類定義 ```typescript class Router { constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, outletMap: RouterOutletMap, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes) errorHandler : ErrorHandler navigated : boolean urlHandlingStrategy : UrlHandlingStrategy config : Routes initialNavigation() : void setUpLocationChangeListener() : void routerState : RouterState url : string events : Observable<Event> resetConfig(config: Routes) : void ngOnDestroy() dispose() : void createUrlTree(commands: any[], {relativeTo, queryParams, fragment, preserveQueryParams,}?: NavigationExtras) : UrlTree navigateByUrl(url: string|UrlTree, extras?: NavigationExtras) : Promise<boolean> navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean> serializeUrl(url: UrlTree) : string parseUrl(url: string) : UrlTree isActive(url: string|UrlTree, exact: boolean) : boolean } ``` ### 屬性 - errorHandler : `ErrorHandler` 當出現導航錯誤時的處理函數 - navigated : `boolean` 用于判斷是否有導航操作 - urlHandlingStraategy : `UrlHandlingStrategy` 抽取和合并URLS，用于Angular 1 到 Angular 2 的遷移 - config : `Routes` - initialNavigation() : `void` 設置本地地址變動監聽器并且執行導航初始化操作 - setUpLocationChangeListener() : `void` 設置本地地址變化監聽器 - routerState : `RouterState` 返回當前路由狀態 - url : `string` 返回當前路由地址 - events : `Observable<Event>` 返回一個路由事件相關的可觀察對象 - resetConfig(config: `Routes`) : `void` 重置導航默認配置并且生成鏈接 使用示例: ```typescript router.resetConfig([ { path: 'team/:id', component: TeamCmp, children: [ { path: 'simple', component: SimpleCmp }, { path: 'user/:name', component: UserCmp } ] } ]); ``` - ngOnDestroy() - dispose() : `void` 釋放路由器 - createUrlTree(commands: `any[]`, {relativeTo, queryParams, fragment, preserveQueryParams,}?: `NavigationExtras`) : `UrlTree` 在當前url樹上執行一組操作然后創建一棵新的url樹 如果傳遞的是已當前已激活的路由，則會從當前路由開始執行操作。如沒有指定路由，從默認從根節點開始執行。 使用示例： ```typescript // create /team/33/user/11 router.createUrlTree(['/team', 33, 'user', 11]); // create /team/33;expand=true/user/11 router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]); // you can collapse static segments like this (this works only with the first passed-in value): router.createUrlTree(['/team/33/user', userId]); // If the first segment can contain slashes, and you do not want the router to split it, you // can do the following: router.createUrlTree([{segmentPath: '/one/two'}]); // create /team/33/(user/11//right:chat) router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]); // remove the right secondary node router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]); // assuming the current url is `/team/33/user/11` and the route points to `user/11` // navigate to /team/33/user/11/details router.createUrlTree(['details'], {relativeTo: route}); // navigate to /team/33/user/22 router.createUrlTree(['../22'], {relativeTo: route}); // navigate to /team/44/user/22 router.createUrlTree(['../../team/44/user/22'], {relativeTo: route}); ``` - navigateByUrl(url: `string`|`urlTree`, extras?: `NavigationExtras`) : `Promise<boolean>` 基于指定的url導航。導航路徑默認使用絕對地址導航。 返回一個promise > - 導航成功解析為 `true` > - 導航失敗解析為 `false` > - 發生錯誤則拒絕 使用方式： ```typescript router.navigateByUrl("/team/33/user/11"); // Navigate without updating the URL router.navigateByUrl("/team/33/user/11", { skipLocationChange: true }); ``` - navigate(commands: `any[]`, extras?: `NavigationExtras`) : `Promise<boolean>` 基根據指定的開始節點和操作命令組導航，如果沒有提供開始節點，路徑默認使用絕對地址導航。 返回一個promise > - 導航成功解析為 `true` > - 導航失敗解析為 `false` > - 發生錯誤則拒絕 使用方式： ```typescript router.navigate(['team', 33, 'user', 11], {relativeTo: route}); // Navigate without updating the URL router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true }); ``` In opposite to `navigateByUrl`, `navigate` always takes a delta that is applied to the current URL. - serializeUrl(url: `UrlTree`) : `string` 將一個 `UrlTree` 序列化為一個字符串。 - parseUrl(url: `string`) : `UrlTree` 將一個字符串解析為 `UrlTree` - isActive(url: `string`|`UrlTree`, exact: `boolean`) : `boolean` 返回當前地址是否激活