我有一个包含我的应用程序路由的模块。其中一条路线是延迟加载模块。
问题是这个延迟加载模块在内部有一个子组件的路由。但是在我的路由器配置中,这条路由没有出现...所以当我调用惰性模块时,不要在我的屏幕上显示任何内容。
这是我的路由器配置(主模块):
export const MODULE_ROUTES: Route[] =[
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'calendar', loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]},
{ path: '**', component: NoPageFoundComponent, pathMatch: 'full' }
]
.
.
.
@NgModule({
imports: [
RouterModule.forChild(MODULE_ROUTES)
.
.
.
在我的惰性模块上:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar', component: CalendarComponent, canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '', component: MainCalendarComponent, canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user', component: EditEventComponent, canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
.
.
.
@NgModule({
imports: [
SharedModule,
.
.
.
RouterModule.forChild(MODULE_CALENDAR_ROUTES)
如果我打印我的路由器配置,这个在我的惰性模块上声明的路由不会显示:
Routes: [
{
"path": "dashboard",
"canActivate": [
null
]
},
{
"path": "calendar",
"loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",
"canActivate": [
null
]
},
{
"path": "**",
"pathMatch": "full"
},
{
"path": "dashboard"
}
]
你能帮帮我吗?
最佳答案
问题在于我在惰性模块上声明路由的方式:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar',
component: CalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '',
component: MainCalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user',
component: EditEventComponent,
canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
CalendarComponent
的路径
必须更改为:
path: 'calendar', // wrong
component: CalendarComponent,
...
到下面:
path: '', // right
component: CalendarComponent,
...
感谢 gitter 上的@jotatoledo 帮助我解决了这个问题。
关于Angular 4 延迟加载和路由不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44356025/