exports: [RouterModule], ... })
###### RouterOutlet 路由出口
RouterOutlet 是一个来自路由模块中的指令，它的用法类似于组件。 它扮演一个占位符的角色，用于在模板中标出一个位置，路由器将会把要显示在这个出口处的组件显示在这里。
组件的内容显示在（router-outlet）下方
###### Router 路由器
使用 Router 对象导航。
constructor(private router: Router) {}
toAComponent() { this.router.navigate(['/common/a']); // 或 this.router.navigateUrl('common/a'); }
###### RouterLink 路由器链接
路由链接 url 必须以 ‘/’ 开头。
<a [routerLink]="['/']">主页 <a [routerLink]="['/common/b', id]">B组件
###### ActivatedRoute 激活的路由
当前激活的路由的路径和参数可以通过 ActivateRoute 的路由服务来获取。
* 常用属性：
| 属性 | 说明 |
| --- | --- |
| url | 路由路径的 Observable 对象，是一个由路由路径中的各个部分组成的字符串数组. |
| data | 一个 Observable，其中包含提供给路由的 data 对象。也包含由解析守卫（resolve guard）解析而来的值。 |
| paramMap | 一个 Observable，其中包含一个由当前路由的必要参数和可选参数组成的 map 对象。用这个 map 可以获取来自同名参数的单一值或多重值。 |
| queryParamMap | 一个 Observable，其中包含一个对所有路由都有效的查询参数组成的 map 对象。 用这个 map 可以获取来自查询参数的单一值或多重值。 |
###### 在路由时传递数据
* 在查询参数中传递数据
>
> /common/b?id=1&name=2 => ActivatedRoute.queryParamMap
>
>
>
* 在路由路径中传递数据
>
> {path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap
>
>
>
* 在路由配置中传递数据
>
> {path: /common/b, component: BComponent, data: {id:“1”, title: “b”}}
>
>
>
* 示例
constructor( private activatedRoute: ActivatedRoute ) { }
ngOnInit() { // 从参数中获取 this.activatedRoute.queryParamMap.subscribe(params => { this.id = params.get('id'); });
// 或 // this.activated.snapshot.queryParamMap.get('id');
// 从路径中获取
this.activatedRoute.paramMap.subscribe(params => {
this.id = params.get('id');
});
this.activatedRoute.data.subscribe(({id,title}) => {
});
}
`snapshot`: 参数快照，是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后，不会监听路由信息的变化。如果确定一个组件不会从自身路由到自身的话，可以使用参数快照。
`subscribe`: 参数订阅，相当于一个监听器，会监听路由信息的变化。
#### 重定向路由
在用户访问一个特定的地址时，将其重定向到另一个指定的地址。
配置重定向路由：
// 当访问根路径时会重定向到 home 路径 const appRoutes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full'}, { path: 'home', component: HomeComponent} ];
#### 子路由
子路由配置语法：
const appRoutes: Routes = [ { path: 'home', component: HomeComponent, children: [ { path: '', component: AComponent}, { path: 'b', component: BComponent} ] }, ];
#### 辅助路由
辅助路由又兄弟路由，配置语法：
// 路由配置 {path: 'xxx', component: XxxComponent, outlet:'xxxlet'}, {path: 'yyy', component: XxxComponent, outlet:'yyylet'}
// 使用
// 链接 <a [routerLink]="['/home',{outlets:{xxxlet: 'xxx'}}]">Xxx
当点击Xxx链接时，主插座会显示’/home’链接所对应的组件，而xxxlet插座会显示xxx对应的组件。
#### 路由守卫（guard）
##### CanActivate/CanActiveChild：处理导航到某路由的情况
当用户不满足这个守卫的要求时就不能到达指定路由。
export class DemoGuard1 implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { ... return true; } }
##### CanDeactivate：处理从当前路由离开的情况
如果不满足这个守卫的要求就不能离开该路由。
// 泛型中 AComponent 代表要守卫的组件。 export class DemoGuard2 implements CanDeactivate { canDeactivate(component: AComponent): boolean { // 根据 component 的信息进行具体操作 retturn true; } }
##### Resolve：在路由激活之前获取路由数据
在进入路由时就可以立刻把数据呈现给用户。
@Injectable() export AResolve implements Resolve { resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { const id = route.paramMap.get('id'); // 可以根据路由中的信息进行相关操作 } }
最后，需要将路由守卫添加到路由配置中：
