AngularJs学习笔记-路由

路由

(1)routerLink用[]括起来的时候传递的是数组,

如:

<a [routerLink]="['/hero', hero.id]"> <span class="badge">{{ hero.id }}</span>{{ hero.name }} </a>

表示带参数的路由地址，可以导航到/hero/:heroId

<a [routerLink]="[{ outlets: { popup: ['contact'] } }]" routerLinkActive="active" >Contact</a>

表示将辅助路由popup的视图导航到contact上,

上面的routerLinkActive 指令会基于当前的 RouterState 为活动的 RouterLink 切换所绑定的 css 类，

路由链接的激活状态会向下级联到路由树中的每个层级，所以，父子路由链接可能会同时激活。

要覆盖这种行为，可以把 [routerLinkActiveOptions] 绑定为 { exact: true } 表达式，

这样 RouterLink 只有当 URL 与当前 URL 精确匹配时才会激活。

 

 

(2)routerLink直接使用时直接使用路径的格式，不需使用数组:

<a routerLink="/crisis" routerLinkActive="active" >Crisis Center</a>

 

(3)路由参数传递的三种形式

1、<a [routerLink]="['/product']" [queryParams]="{id: 1}" ></a>

2、

3、

 

 

 

 

(4)路由跳转时当组件跳到自身时，组件不会重复创建，ngOnInit方法不会被重复执行，所以如果

在ngOnInit方法中使用路由快照的形式获取参数，则数据只会获取一遍 

this.id = this.routerInfo.snapshot.params["id"] (routerInfo: ActivatedRoute)

应该采用rxjs订阅方式实现异步获取数据

this.routerInfo.params.subscribe((params: Params) =>  this.id = params["id"] )

 

(5) Router.navigate与[routerLink]的使用方式相同，如this.router.navigate(["/heroes",{id: this.hero.id}]);

 

(6) 辅助路由

1、配置辅助路由

<router-outlet name="popup"></router-outlet>指定路由名称为popup

 

{path: 'contact', component: MessageComponent, outlet: "popup"}加上outlet属性

 

<a [routerLink]="[{ outlets: { popup: ['contact'] } }]" routerLinkActive="active" >Contact</a>设置路由导航链接

 

2、将辅助路由置空的方式：this.router.navigate([{outlets: {popup: null}}]);

3、指定辅助路由的同时指定主路由

<a [routerLink]="[{ outlets: { primary：['home'], popup: ['contact'] } }]" routerLinkActive="active" >Contact</a>

 

(7)相对导航

路由器支持在链接参数数组中使用“目录式”语法来为查询路由名提供帮助：

./ 或 无前导斜线 形式是相对于当前级别的。

../ 会回到当前路由路径的上一级。

 

(8)路由守卫

canActivate: 要求认证

canDeactivate:处理未保存的更改

Resolve:当需要所有必要数据都已经拿到之后，才渲染路由组件时，使用Resolve守卫，

当获取数据失败时，可以通过Resolve守卫跳转回原来的路径或进行其它失败处理

https://angular.cn/guide/router#milestone-5-route-guards