如何为多层应用程序实现延迟加载

Question

我有一个 3 层应用程序，但我遇到了架构问题。 以下是示例网址：

/ (base url)
dummy-configuration/
dummy-configuration/dummyModel   
dummy-configuration/dummyModel/dummyData

所以我有一个虚拟配置模块、一个dummyModel模块和一个dummyData组件。 但是，我只将路由器出口指令放在应用程序组件 html和虚拟配置html 中。 这是我第一次出错的地方，我相信。 我不需要每个级别的路由器插座吗？

我的app-routing.module文件延迟加载我的虚拟配置模块：

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

然后，虚拟配置路由模块延迟加载其子模块：

children: [
  {
    path: {PATH},
    loadChildren: () =>
      import('../dummyModel/dummy-model.module').then((m) => m.DummyModule),
  }
]

Dummy 模块将加载其子模块：

children: [
  {
    path: 'childOne',
    component: childOneComponent,
  },
  {
    path: 'childTwo',
    component: childTwoComponent,
  }
]

我所取得的是延迟加载虚拟配置和“虚拟模型”模块。 但我想要的也是延迟加载虚拟 model的组件路由，我不知道该怎么做。 我怎样才能正确地重新架构这个？ 老实说，我有点失落。

Answer 1

如果您使用children属性，您确实需要一个可以在其中呈现子项的路由器插座。 但是，在您的情况下，您可以像在plan-configuration路径中加载它一样添加第一个模块。

第二个模块您可以在plan-configuration/fsa路径中加载，然后它将正确处理profile和dependents路由，而不需要另一个路由器出口，而是在主出口中呈现。

简而言之，只需在app-routing中导入ra-fsa模块，并使用plan-configuration/fsa作为路径。