标签：调用 .com font ice art 进入 struct 获取数据 不用
Resolve守卫主要是在路由激活之前获取路由数据，预先加载数据，且数据加载完成后路由才返回true，以保证导航至该路由时不用现去服务取数据。
创建守卫文件resolve.service.tsimport { 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;
}
})
}
}
将守卫添加至routingpath:‘‘, component:Comp, resolve:{ dataA:ResolveService }
配置Resolve守卫后，加载路由前就已经获取了数据，所以在组件内部不需要再去调用服务来获取数据，可以直接从route的data属性获取数据。
ngOnInit() { this.route.data .subscribe((data: { dataA }) => { this.data = data.dataA; }); }
注意这里data中的dataA属性是在路由中接受守卫数据dataA
上面的例子我们已经使用了CanActivate路由，它会在导航至该视图之前发生。这个守卫在这里也就不讲了。
与进入路由守卫用法类似，只不过挂在路由数组父节点上，进入这个节点的子节点路由视图之前触发。与进入路由守卫用法类似，不过是在离开视图时触发。在路由激活前触发，一般用来获取激活路由对应视图组件数据使用。进入视图前，利用该守卫将视图所需数据加载完成，可以避免进入视图无法出现数据的情况。利用路由获取的数据可以在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守卫中拿到数据。
{ path:‘‘, component:ParACom, resolve:{ resultData: GuardService } }
标签：调用 .com font ice art 进入 struct 获取数据 不用
原文地址：https://www.cnblogs.com/dalulu/p/8745963.html
