## 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` 返回当前地址是否激活