如何在一个延迟加载模块中管理多个路由答案

【问题标题】：How to manage multiple routes in one lazy loading module如何在一个延迟加载模块中管理多个路由
【发布时间】：2019-07-12 06:29:55
【问题描述】：

这是站点信息路由模块

const routes: Routes = [
{
  path: '', children: [
    {
      path: '',
      component: WhyUsComponent
    },
    {
      path: '',
      component: WhoWeAreComponent
    },
    {
      path: '',
    component: WhatWeDoComponent
    }
  ]
}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SiteInfoRoutingModule { }

下面是应用路由模块。问题是所有路由的routerLink都转到第一个组件，这就是site-info模块中的why-us。如果我在应用程序路由模块中保持路径为空，而是在 site-info-routing 模块的相应路径中添加why-us who-we-are和career-with-us，那么它可以工作，但这是最好的方法管理它？

{ 
         path: 'why-us',
         loadChildren: './site-info/site-info.module#SiteInfoModule',

        },
     { 
     path: 'who-we-are',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    },
     { 
     path: 'what-we-do',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    }

【问题讨论】：

标签： angular

【解决方案1】：

您实际上并没有在延迟加载模块中链接您的路线。

const routes: Routes = [
{
  path: '', 
  children: [
    {
      path: '',
      redirectTo: 'why-us',
      pathMatch: 'full'
    {
      path: 'why-us',
      component: WhyUsComponent
    },
    {
      path: ''who-we-are',
      component: WhoWeAreComponent
    },
    {
      path: 'what-we-do',
    component: WhatWeDoComponent
    }
  ]
}
];

以及主路由模块：

{ 
    path: 'site-info',
    loadChildren: './site-info/site-info.module#SiteInfoModule'
},

【讨论】：

为什么 pathMatch: 'full' 只出现在第一个而不是其他
如果您想了解有关 pathMatch 的更多信息，请查看this question
您要访问的确切路线是什么？路线应如下所示：localhost:4200/site-info/why-us
我期待 localhost:4200/why-us .. 我们可以让它成为 localhost:4200/why-us 不，我应该为所有这 3 个组件制作不同的模块。
path: '', loadChildren: './site-info/site-info.module#SiteInfoModule' 虽然有效

【解决方案2】：

这表明每当你得到路径why-us 加载SiteInfoModule

{
        path: '',
        redirectTo: 'why-us',<=== deafult loading path 
        pathMatch: 'full',
    },
  { 
         path: 'why-us',
         loadChildren: './site-info/site-info.module#SiteInfoModule',

        },
     { 
     path: 'who-we-are',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    },
     { 
     path: 'what-we-do',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    }

之后，当模块被加载并在下面加载相应的路由模块时：-

但是，您现在没有指定要加载哪个组件，因为您为所有组件输入了空路径。

所以最好在这里也提供一些路径：-

const routes: Routes = [
{
  path: '', 
  children: [
    {
      path: '',  <=== default path can be empty
      component: WhyUsComponent
    },
    {
      path: 'whoweare',
      component: WhoWeAreComponent
    },
    {
      path: 'whatwedo',
    component: WhatWeDoComponent
    }
  ]
}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SiteInfoRoutingModule { }

【讨论】：