Ali*_*eño 5 lazy-loading angular-module angular2-routing angular
我有一个模块与我的应用程序的路线.其中一条路线是延迟加载模块.
问题是这个延迟加载模块内部有子组件的路由.但是在我的路由器配置上这条路线没有出现......所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容.
这是我的路由器配置(主模块):
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)
.
.
.
Run Code Online (Sandbox Code Playgroud)
在我的懒惰模块上:
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)
Run Code Online (Sandbox Code Playgroud)
如果我打印我的路由器配置,我的懒惰模块上的路由声明不显示:
Routes: [
{
"path": "dashboard",
"canActivate": [
null
]
},
{
"path": "calendar",
"loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",
"canActivate": [
null
]
},
{
"path": "**",
"pathMatch": "full"
},
{
"path": "dashboard"
}
]
Run Code Online (Sandbox Code Playgroud)
你能帮助我吗?
问题在于我在懒惰模块上声明我的路线的方式:
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]
}
]
}
]
Run Code Online (Sandbox Code Playgroud)
在path中CalendarComponent必须从改变:
path: 'calendar', // wrong
component: CalendarComponent,
...
Run Code Online (Sandbox Code Playgroud)
到下面:
path: '', // right
component: CalendarComponent,
...
Run Code Online (Sandbox Code Playgroud)
感谢@jotatoledo on gitter帮助我解决这个问题.
| 归档时间: |
|
| 查看次数: |
12892 次 |
| 最近记录: |