在 Angular 6 中使用延迟加载时，路由不适用于不同的路由答案

【问题标题】：routing is not working for different routes while using lazy loading in Angular 6在 Angular 6 中使用延迟加载时，路由不适用于不同的路由
【发布时间】：2020-10-07 06:34:59
【问题描述】：

实际上，在我的应用程序中建立延迟加载时我遇到了问题。我正在使用角度 6。这是场景-

在我的 app-routing.module.ts 我有以下路线-

const appRoutes: Routes = [

  {
    path: '',
    redirectTo: 'dashboard', pathMatch: 'full'
  },
  {
    path:'home',
    loadChildren: './main/home/home.module#HomeModule'
  }

  { path: '**', redirectTo: '/404' }
];

在我的 home.module.ts 我有这条路线-

常量路由：Routes = [

  {
    path: '',
    component: HomeComponent
  },
  {
    path:'list',
    component: ListComponent
  }

];

现在想像下面那样导航-

/home---> HomeComponent
/list--->列表组件

我可以导航到 HomeComponent 但无法导航到 ListComponent 。谁能帮助我如何实现这一点。谢谢

【问题讨论】：

能否分享一下你的app.module和home.module的配置
请问您能具体说明哪种配置吗？其实我想知道我应该如何设置访问路径为'localhost:4200/list'

标签： angular angular-routing

【解决方案1】：

为了访问列表延迟加载的路由，唯一的方法是通过 home 路由 aka (localhost:4200/home/list)

const appRoutes: Routes = [

  {
    path: '',
    redirectTo: 'dashboard', pathMatch: 'full'
  },
  {
    path:'home',
    loadChildren: './main/home/home.module#HomeModule'
  },

  { path: '**', redirectTo: '/404' }
];

const routes: Routes = [

  {
    path: '',
    component: HomeComponent
  },
  {
    path:'list',
    component: ListComponent
  }

];

根据您提供的代码，home 模块下的所有组件都将以路由前缀 home 开头。启动应用程序后，您可以使用以下方式访问登录组件：

http//:localhost:4200/home/list

【讨论】：

谢谢@Johnny。得到了我的答案。