Angular的路由延迟加载
angular的路由延迟加载大致分为两类CanActivate
和CanLoad
。这两个方法都可以进行一些条件判断来决定是否加载相关的路由。
CanActivate
简单的应用
- 新建一个pageRouteLoad.ts
@Injectable()
export class PageRouteLoad implements CanActivate {
canActivate():Observable<any> {
return false;
}
}
- 更改路由,在原路由的基础上添加上一个
canLoad
属性,并且赋值为新建的路由拦截对象
export const routes: Routes = [
{
path:"userControl",
component:UsersControlComponent,
canActivate:[PageRouteLoad],
},
]
angular还会向canLoad方法中传入两个参数ActivatedRouteSnapshot
和RouterStateSnapshot
-
ActivatedRouteSnapshot
表示要激活的目标配置项
-
RouterStateSnapshot
表示当前的路由状态
通过这两个参数可以获取相关的路由信息。
canActivate(route:ActivatedRouteSnapshot,router:RouterStateSnapshot){
}
异步的情况
如果决定是否加载下一个页面需要的条件是异步的结果,则需要返回一个Observable才行
canActivate(route:ActivatedRouteSnapshot,router:RouterStateSnapshot): any {
return new Observable((observer) => {
observer.next(true);
}
},()=>{
observer.next(false);
},complete=>{
observer.complete();
});
});
}
通过返回一个Observable才能使异步的结果生效,并且必须调用complete()函数,表示当前Observable已经完结了,否则不会进行跳转。
CanLoad
实际上CanLoad和CanActivate在表面上的表现并没有差异,都是对路由进行拦截加载。
@Injectable()
export class PageRouteLoad implements CanLoad {
canLoad():Observable<any> {
return false;
}
}
export const routes: Routes = [
{
path:"userControl",
component:UsersControlComponent,
canLoad:[PageRouteLoad],
},
]
这个CanLoad对象也不会让UsersControlComponent不加载。但是它们的不同就是,使用CanActivate,即使返回的是false,用户并没有权限访问该路由,但是相应的模块会被加载。使用CanLoad的话,用户也没有权限访问,相应的模块并不会被加载。这里是指对应组件的代码。