如何為多層應用程序實現延遲加載

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作為路徑。