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 "路径将懒惰加载所有需要的模块。

在你的 HostingComponentWithOutlets html模板中需要链接到'featureOne'。

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

如果你想从模板中直接进入完整的路径和辅助路径，则应该定义 "path-to-featureOne-component "和 "path-to-featureOne-component"。

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

FeatureOneModule 应该定义 "path-to-featureOne-component "和 "path-to-featureOne-component"。FeatureTwoModule 应在其等效的途径定义中定义 "path-to-featureTwo-component"。