时间戳

首页 > 解决方案 > 如何为多层应用程序实现延迟加载

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

问题描述

我有一个 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,
  }
]

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

标签： angular

解决方案

如果您使用该children属性，您确实需要一个可以渲染孩子的路由器插座。但是，在您的情况下，您可以添加第一个模块，就像您通过在plan-configuration路径中加载它显示的那样。

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

简而言之，只需将ra-fsa模块导入app-routingwithplan-configuration/fsa作为您的路径。

推荐阅读