如何实现多层应用的懒惰加载?

问题描述 投票:0回答:1

我有一个3层的应用程序,我在架构上遇到了问题。下面是例子中的URLs。

/ (base url)
plan-configuration/
plan-configuration/fsa   
plan-configuration/fsa/profile

所以我有一个... 计划配置 模块,一个 fsa 模块和一个 概况 组件。然而,我只把路由器出口指令放在 应用组件html计划配置 html。这是我第一次出错的地方,我相信。难道我不需要每层都有一个路由器插座吗?

我的 app-routing.module 文件懒加载我的 计划配置模块:

 {
    path: 'plan-configuration',
    loadChildren: () =>
      import('./plan-configuration/plan-configuration.module').then(
        (p) => p.PlanConfigurationModule
      ),
  }

负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 负责人: 计划配置路由模块 然后懒洋洋地装上它的孩子。

children: [
  {
    path: APP_ROUTE.PLAN_CONFIGURATION.CHILDREN.FSA.PATH,
    loadChildren: () =>
      import('../fsa/ra-fsa.module').then((m) => m.RaFsaModule),
  }
]

FSA模块 将加载其子代。

children: [
  {
    path: 'profile',
    component: RaClientProfileComponent,
  },
  {
    path: 'dependents',
    component: RaDependentCareComponent,
  }
]

我所实现的是懒惰地加载那些... 计划配置 和 "fsa "模块。但我想的是,我也要懒得加载组件路由的 fsa 但我不知道怎么做。如何才能正确的重新架构呢?说实话,我有点迷茫。

谢谢任何有用的提示。

angular
1个回答
1
投票

如果你使用 children 属性,你确实需要一个可以渲染子模块的 router-outlet。不过在你的情况下,你可以像你展示的那样,通过加载它的 plan-configuration 路径。

第二个模块你可以直接在 plan-configuration/fsa 路径,然后机智将正确处理 profiledependents 路由,而不需要另一个路由器出口,而是在主路由器中渲染。

简而言之,只要导入 ra-fsa 模组 app-routingplan-configuration/fsa 作为你的路径。

© www.soinside.com 2019 - 2024. All rights reserved.