Angular 4延迟加载和路由不起作用

发布时间：2020-12-17 17:23:16 所属栏目：安全来源：网络整理

导读：我有一个模块与我的应用程序的路线.其中一条路线是延迟加载模块. 问题是这个延迟加载模块内部有子组件的路由.但是在我的路由器配置上这条路线没有出现……所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容. 这是我的路由器配置(主模块)： export cons

我有一个模块与我的应用程序的路线.其中一条路线是延迟加载模块.

问题是这个延迟加载模块内部有子组件的路由.但是在我的路由器配置上这条路线没有出现……所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容.

这是我的路由器配置(主模块)：

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,CalendarGuard]
            },{

                path: 'user',component: EditEventComponent,CalendarGuard]
            }
        ]
    }
]

.
.
.

@NgModule({
    imports: [
        SharedModule,.
.
.
        RouterModule.forChild(MODULE_CALENDAR_ROUTES)

如果我打印我的路由器配置,我的懒惰模块上的路由声明不显示：

Routes:  [
  {
    "path": "dashboard","canActivate": [
      null
    ]
  },{
    "path": "calendar","loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",{
    "path": "**","pathMatch": "full"
  },{
    "path": "dashboard"
  }
]

你能帮助我吗？

解决方法

问题在于我在懒惰模块上声明我的路线的方式：

export const MODULE_CALENDAR_ROUTES: Route[] = [
    {
        path: 'calendar',CalendarGuard]
            }
        ]
    }
]

CalendarComponent的路径必须从以下更改：

path: 'calendar',// wrong
component: CalendarComponent,...

到下面：

path: '',// right
component: CalendarComponent,...

感谢@jotatoledo on gitter帮助我解决这个问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!