angular - 我怎样才能只预加载其 parent 已被激活的模块？

Question

我实现了延迟加载。我正在尝试设置 custom preloading strategy .

假设我有以下 url 结构:

/
/fruit
/fruit/bananas
/fruit/apples
/vegetables

如果我点击 / , 我想预加载 /fruit .按照 Angular 示例，我简单地输入了 data: {preload: true}在我的路由配置中，然后实现自定义预加载策略来检查数据和加载。这很好用。

但是，我不想预加载 /bananas或 /apples直到我真正导航到/fruit .事实上，尽快/fruit已预加载，预加载策略使用 {preload: true} 查找更多模块和预加载 /bananas和 /apples也是。

有没有一种干净的方法可以在导航到父模块后推迟预加载模块？

Answer 1

我最终使用路由的 data 属性做了一个自定义但可扩展的解决方案。我创建了 3 个属性:

• preload( bool 值)- 如果为真，则在 Angular 知道后立即预加载(如 /fruit)。这是 Angular 在他们的文档中给我们的基本示例
• 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
}