Я закончил создание настраиваемого, но масштабируемого решения, используя свойство data
маршрута. Я создал 3 свойства:
preload
(boolean) - если true, предварительно загрузите, как только Angular узнает об этом (например, /fruit
). Это основной пример, который угловой дал нам в своих документах preloadCheckpoint
(перечисление) - я определяю каждое приложение «контрольная точка» в своем собственном перечислении. Таким образом, в примере моего вопроса /fruit
- контрольная точка, и я бы определил на ней data: {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
}