angular2系统学习 - 路由与导航(5)
1.Resolve守卫
Resolve守卫主要是在路由激活之前获取路由数据,预先加载数据,且数据加载完成后路由才返回true,以保证导航至该路由时不用现去服务取数据。
1.1配置Resolve守卫
创建守卫文件resolve.service.ts
import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
@Injectable()
export class ResolveService implements Resolve{
constructor(private dataService:Dataservice,private router: Router){ }
resolve(private route: ActivatedRouterSnapshot ): Promise<Data>|boolean{
return this.dataService.getData().then(result => {
if(result) return result;
else {
this.router.navigate(['../'],{relativeTo:this.route});
return false;
}
})
}
}
将守卫添加至routing
path:'',
component:Comp,
resolve:{
dataA:ResolveService
}
配置Resolve守卫后,加载路由前就已经获取了数据,所以在组件内部不需要再去调用服务来获取数据,可以直接从route的data属性获取数据。
ngOnInit() {
this.route.data
.subscribe((data: { dataA }) => {
this.data = data.dataA;
});
}
注意这里data中的dataA属性是在路由中接受守卫数据dataA
2.各守卫用法。
2.1CanActivate 进入路由守卫
上面的例子我们已经使用了CanActivate路由,它会在导航至该视图之前发生。这个守卫在这里也就不讲了。
2.2CanActivateChild 进入子路由守卫
与进入路由守卫用法类似,只不过挂在路由数组父节点上,进入这个节点的子节点路由视图之前触发。
2.3 CanDeactivate 离开路由守卫
与进入路由守卫用法类似,不过是在离开视图时触发。
2.4 Resolve 激活路由守卫
在路由激活前触发,一般用来获取激活路由对应视图组件数据使用。进入视图前,利用该守卫将视图所需数据加载完成,可以避免进入视图无法出现数据的情况。利用路由获取的数据可以在route对象中获取。
激活路由守卫配置
import { Injectable } from '@angular/core';
import { Router, Resolve,
ActivatedRouteSnapshot } from '@angular/router';
@Injectable()
export class GuardService implements Resolve<ModelClass>{
resolve(route:ActivatedRouteSnapshot): Promise<ModelClass>|boolean{
//获取数据,并返回。数据挂在路由上,并非挂在视图组件上。
//获取不到,返回false。
}
}
路由配置
{
path:'',
component:ParACom,
resolve:{
resultData: GuardService
}
}
这里有两个重点
1.继承类后挂着类型
2.返回的数据以对象的形式挂在路由守卫配置上,属性名自定义,属性值为守卫类。
通过路由获取数据
由于我们已经挂了Resolve守卫,在组件中想要获取数据时,不需要再重新通过服务获取,而可以直接从Resolve守卫中拿到数据。
ngOnInit() {
this.route.data
.subscribe((data: { objPro: ModelClass }) => {
this.name = data.objPro.name;
this.value = data.objPro.value;
});
}