Question

我有一个应用我想在同一时间延迟加载两个模块 与 相同的路径

我的路由模块如下所示：

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

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

但这会导致仅加载第一个

我不能＆＃39;无论如何都要这样做，例如：

  {
    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' }

点击“首页”路线将延迟加载所有必需的模块。

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

<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]
  },
]

换句话说，将模块的路由路径移到父模块之外，在这种情况下，我假设它们是“adviser”和“home”

然后使用重定向解决方案和/或像这样的路径开始模块路由：

首页模块路由：

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 一个。

如果您不希望路由器插座内有子组件，那就更简单了，您只需删除子路由并重定向即可。

注意：如果此解决方案不能解决您的问题，请分享有关您的模块路由的更多详细信息，以便我更好地了解您所需的路由配置。

Angular：延迟加载具有相同路由的多个模块

2 个答案: