我实现了延迟加载.我正在尝试建立一个
custom preloading strategy.
假设我有以下网址结构：
/ /fruit /fruit/bananas /fruit/apples /vegetables
如果我打/,我想预加载/水果.在Angular示例之后,我只是在我的路由配置中放入数据：{preload：true},然后实现一个自定义预加载策略来检查数据和加载.这很好用.
但是,在我真正导航到/ fruit之前,我不想预加载/香蕉或/苹果.事实上,只要预先加载/ fruit,预加载策略就会找到更多带有{preload：true}和preloads / bananas和/ apples的模块.
解决方法
我最终使用route的data属性做了一个自定义但可扩展的解决方案.我创建了3个属性：
> preload(boolean) – 如果为true,只要Angular知道它就会预加载(比如/ fruit).这是Angular在他们的文档中给出的基本示例
> preloadCheckpoint(枚举) – 我在自己的枚举中定义每个应用程序“检查点”.所以在我的问题的例子中,/ fruit是检查点,我在其上定义了数据：{preloadCheckpoint：myCheckpointEnum.FRUIT}
> preloadAfterCheckpoint(枚举) – 我将其定义为推迟预加载直到达到某个检查点.如果我在/ bananas上定义它,那么在定义具有FRUIT检查点的路径之前,香蕉模块将不会加载
我订阅了路由更改,因此我可以更新检查点列表,然后在每次预加载尝试期间检查该列表.
export class CustomPreloadingStrategy implements PreloadingStrategy {
checkpoints: Set<PreloadCheckpoints> = new Set<PreloadCheckpoints>();
constructor(router: Router,route: ActivatedRoute){
router.events.pipe(
filter(event => event instanceof NavigationEnd),map(() => route),map(route => {
while (route.firstChild) route = route.firstChild; //gets the deepest child
return route;
}),filter(route => route.outlet === 'primary'))
.subscribe((route) => {
if(route.snapshot.data['preloadCheckpoint'] !== undefined){
this.checkpoints.add(route.snapshot.data['preloadCheckpoint']);
}
});
}
preload(route: Route,load: () => Observable<any>): Observable<any> {
if (route.data && ( route.data['preload'] || this.checkpoints.has(route.data['preloadAfterCheckpoint']) )){
return load(); //preload this route
} else {
return of(null);
}
}
}
export enum PreloadCheckpoints {
FRUIT
}
