Angular 学习（五）：Angular 路由（Route）_angular route

imports: [RouterModule.forRoot(routes)],
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’);
// 可以根据路由中的信息进行相关操作
}
}

最后，需要将路由守卫添加到路由配置中：