angular - 在 Angular 6 中使用延迟加载时,路由不适用于不同的路由
问题描述
实际上,我在我的应用程序中建立延迟加载时遇到了问题。我正在使用角度 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 我有这条路线-
常量路线:路线= [
{
path: '',
component: HomeComponent
},
{
path:'list',
component: ListComponent
}
];
现在想像下面一样导航 -
- /home---> Home组件
- /list---> 列表组件
我可以导航到 HomeComponent 但无法导航到 ListComponent 。任何人都可以帮助我如何实现这一目标。谢谢
解决方案
为了访问列表延迟加载的路由,唯一的方法是通过 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
推荐阅读
- c# - 当用户输入整数时,MessageBox.Show 不会出现
- bash - 在远程执行的 bash 文件中加载本地 config.env
- reactjs - 无法在功能组件中重新渲染 FlatList?
- python - 如何在 Normalizer (spark nlp) 中使用多个清理模式?
- google-apps-script - 如何在 Google Cloud Platform 中修改我的工作区列表
- model-view-controller - MVC 在文本字段/标签中显示来自 PickerView 的值的问题
- directx-12 - 是否可以在 DirectX 12 桌面应用程序中将 HDR 与 MSAA 结合使用?
- python - 无法分配“'7'”:“Appointment.your_service”必须是“Service”实例
- java - 为什么更改 JLabel 的 bg 颜色会打开另一个 JFrame
- r - clustMixType 版本 0.2-11 找不到 silhouette_kproto