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;    });}