Angular：延遲加載具有相同路由的多個模塊

Question

我有一個應用程序，我想在同一時刻使用相同的路由路徑延遲加載兩個模塊。

我的路由模塊如下所示：

  {
    path: 'mypath',
    loadChildren: () => HomeModule,
    canLoad: [HomeGuard]
  },

   {
     path: 'mypath',
     loadChildren: () => AdvisorModule,
     canLoad: [AdvisorGuard]
   },

但這導致只加載第一個

我無論如何都找不到這樣做，例如：

  {
    path: 'mypath',
    loadChildren: () => HomeModule, advisor module // ??
    canLoad: [// ??]
  },

我也不想在另一個中導入其中一個，就像這樣，只有一個模塊會被延遲加載，而另一個會自動加載

怎么可能呢？？

Answer 1

您需要將路線重新排列一級，還需要為要加載的額外組件添加輔助路線。

這適用於 Angular 9（也可能適用於 8）

{
  path: 'home',
  component: HostingComponentWithOutlets,
  children: [
    {
      path: 'featureOne',
      loadChildren: () => import('xxxxx').then(m => m.FeatureOneModule),
      canLoad: [featureOneGuard]
    },
    {
      path: 'featureTwo',
      outlet: 'outletAux1',
      loadChildren: () => import('yyyyy').then(m => m.FeatureTwoModule),
      canLoad: [featureTwoGuard]
    },
    // you can even load more components to different outlets from the same module
    // and update redirectTo and routerLink accordingly
    //{
    //  path: 'featureThree',
    //  outlet: 'outletAux2',
    //  loadChildren: () => import('yyyyy').then(m => m.featureTwoModule),
    //  canLoad: [featureTwoGuard]
    //},
    {
      path: '',
      redirectTo:
        '/absolute/path/to/home(featureOne/path-to-featureOne-component//outletAux1:featureTwo/path-to-featureTwo-component)',
      pathMatch: 'full'
    }
  ]
},
{ path: '', redirectTo: 'home', pathMatch: 'full' }

點擊“home”路線將延遲加載所有必需的模塊。

在您需要鏈接到“featureOne”的HostingComponentWithOutlets html 模板中：

<a [routerLink]="featureOne/path-to-featureOne-component"   

如果您想使用模板中的輔助路線直接進入完整路線：

<a [routerLink]="['.', { outlets: { 'primary': ['featureOne', 'path-to-featureOne-component'], 'outletAux1': ['featureTwo', 'path-to-featureTwo-component'] } }]"   

FeatureOneModule應定義“path-to-featureOne-component”，而FeatureTwoModule應在其等效路由定義中定義“path-to-featureTwo-component”。

Answer 2

你可以像這樣返工：

const routes: Routes = [
  {
    path: 'mypath/home',
    loadChildren: () => HomeModule,
    canLoad: [HomeGuard]
  },
  {
    path: 'mypath/advisor',
    loadChildren: () => AdvisorModule,
    canLoad: [AdvisorGuard]
  },
]

換句話說，將模塊的路徑路徑移到父模塊之外，在這種情況下，我假設它們是“顧問”和“家”

然后使用重定向解決方案和/或像這樣的路徑在模塊路由中開始：

家庭模塊路由：

const routes: Routes = [
  {
    path: '', // <-- in your current solution probably 'home'
    component: HomeParentComponent,
    children: [
      { path: '', redirectTo: 'childOne', pathMatch: 'full' },
      { path: 'childOne', component: HomeChildComponentOne },
    ],
  },
];

顧問模塊路由：

const routes: Routes = [
  {
    path: '', // <-- in your current solution probably 'advisor'
    component: AdvisorParentComponent,
    children: [
      { path: '', redirectTo: 'childOne', pathMatch: 'full' },
      { path: 'childOne', component: AdvisorChildComponentOne },
    ],
  },
];

這很好用，您應該能夠導航到：

'/mypath/home'並以HomeParentComponent的路由器出口結束在您的HomeChildComponent 。

'/mypath/advisor'並最終在您的AdvisorParentComponent使用AdvisorChildComponent路由器出口之一。

如果您不希望路由器插座內有子組件，那就更簡單了，您可以刪除子路由並重定向。

---

注意：如果此解決方案不能解決您的問題，請分享有關您的模塊路由的更多詳細信息，以便我可以更好地了解您所需的路由配置。