Angular 2 之六 路由
概述
Angular 2采用组件路由方式，将浏览器URL解释为路由到某个组件的指令，同时附加可选的参数传递给组件。组件路由可以绑定到页面链接上，用户点击后转到对应的组件；也可以采用编码方式在组件间跳转。组件路由历史记录在浏览器历史中，支持浏览器的向前、向后按钮操作。 Angular 2的路由功能是作为可选模块，因此需单独导入router.js，并在 <head>后增加<base href="/">。
路由配置 RouteConfig
路由配置示例如下：
@Component({ ... }) @RouteConfig([ {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent}, {path:'/heroes', name: 'Heroes', component: HeroListComponent}, {path:'/hero/:id', name: 'HeroDetail', component: HeroDetailComponent} ]) export class AppComponent { }
路由配置使用@RouteConfig标注，定义该组件可以使用的路由。其中：
- path用于匹配浏览器URL，其中HelloDetail路由path中的：id是路由参数
- name是路由的名称，用于RouterLink和API
- component是该路由显示的组件
- useAsDefault说明用于缺省显示的组件。
Angular 2 beta 9开始支持正则表达式。
路由链接 RouterLink
路由链接示例如下：
template: ` <h1>Component Router</h1> <nav> <a [routerLink]="['CrisisCenter']">Crisis Center</a> <a [routerLink]="['Heroes']">Heroes</a> </nav> <router-outlet></router-outlet>`,
表示点击Crisis Center链接转入CrisisCenter组件，点击Heros转入Heroes组件。组件显示在中。
对有路由参数的路由，路由链接可表示为：['HeroDetail', { id: hero.id }]，HeroDetailComponent通过注入RouteParams服务，调用该服务的get方法获取id值。
还可以通过query string传递参数。一般地，优先考虑路由参数，路由参数是必须输入的，并可用于区分不同的路由；query string用于可选参数，以及复杂、多值参数。
路由参数和query string的传递参数方式一样，如果不能匹配为路由参数，则作为query string。
路由接口 Router API
路由链接功能可以通过注入Router服务以编程方式实现，如：
onSelect(hero: Hero) {
this._router.navigate( ['HeroDetail', { id: hero.id }] );
}
Router服务具体接口参见文档。
子路由
子组件可以定义自己的路由配置和，在父组件的路由配置如下：
@RouteConfig([ { // Crisis Center child route path: '/crisis-center/...', name: 'CrisisCenter', component: CrisisCenterComponent, useAsDefault: true }, {path: '/heroes', name: 'Heroes', component: HeroListComponent}, {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}, ])
/crisis-center/…说明是子路由。
路由生命周期
路由生命周期回调函数如以下 表，返回布尔值或Promise：
- @CanActivate： 判断组件是否可以被调用
- routerOnActivate： 路由到该组件后调用
- routerCanReuse： 确定是否可以重用组件实例
- routerOnReuse： 重用该组件时调用
- routerCanDeactivate： 判断组件是否可以被移除
- routerOnDeactivate： 组件被移除前被调用。
