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

我有一个三层应用程序，我的架构有问题。以下是示例URL：

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

我有一个虚拟配置模块，一个dummyModel模块和一个dummyData组件。但是，我只在应用程序组件html和虚拟配置html中放置路由器出口指令。我想这是我第一次出错的地方。我不需要在每一层都安装一个路由器插座吗

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

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

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

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

虚拟模块将加载其子模块：

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

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

---

我实现的是延迟加载虚拟配置和“虚拟模型”模块。但是我想做的是延迟加载虚拟模型的组件路由，我不知道怎么做。我怎样才能正确地重新构建它？老实说，我有点迷路了。

如果您使用

children

属性，您确实需要一个路由器出口，可以在其中呈现子对象。不过，在您的情况下，您只需添加第一个模块，就像您在

计划配置

路径加载它所显示的那样

您只需在

计划配置/fsa

路径加载第二个模块，wit将正确处理

配置文件

和

从属

路由，而不需要另一个路由器出口，而是在主路由器出口中呈现

---

简而言之，只需将

ra fsa

模块导入

app routing

中，并将

plan configuration/fsa

作为路径。

您想让我将“fsa”模块从“plan config”中导入到“app routing”中吗？我不明白。不过，我明白你的意思，我不需要在每一层都安装路由器插座。我在“计划配置”级别上有一个嵌套路由器，可以在那里呈现“配置文件”和“从属”组件。这正是我的建议，因为您不想在其中一个

计划配置
组件中呈现
fsa
模块的组件，解决方案是将模块移动到实际要渲染组件的位置。如果您希望您的URL仍然包含
计划配置
位，您可以将其添加到路径中。好的，我明白您的意思-谢谢。但是，我确实希望“fsa”模块及其所有组件在“plan config”中呈现；这是他们的归属，这是有意义的。当用户进入站点时，他们单击一个按钮加载“计划配置”，然后单击另一个按钮加载“fsa”。我问题的最后一部分怎么样？一位开发人员要求我对组件路由进行延迟路由。这是一件事吗？我想我需要做的就是懒洋洋地加载模块。我可能有点误解了你的问题。您只能以惰性方式加载模块。如果您想以惰性方式加载这两个路由，您可以将这些组件分离到单独的模块中，并在
'
路径加载它们，这意味着一个空路径。因此，
fsa
模块有
loadChildren
路由以及
profile
和
dependents
路径。谢谢，我将您的答案标记为已接受答案。就我个人而言，我将遵循您的建议，而不是仅仅为了实现延迟路由而将组件拆分为单独的模块。我会告诉开发人员模块是延迟加载的，实际上没有延迟路由。