angular – 如何仅预加载父项已激活的模块？

发布时间：2020-12-17 17:37:15 所属栏目：安全来源：网络整理

导读：我实现了延迟加载.我正在尝试建立一个 custom preloading strategy. 假设我有以下网址结构： //fruit/fruit/bananas/fruit/apples/vegetables 如果我打/,我想预加载/水果.在Angular示例之后,我只是在我的路由配置中放入数据：{preload：true},然后实现一个自

我实现了延迟加载.我正在尝试建立一个 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
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!