路由器行为不正常

时间:2018-09-21 12:03:52

标签: angular routing lazy-loading

所以我也有app-routing.module.ts(略作编辑):

const routes: Routes = [
    {
        path: '',
        component: ShellComponent,
        children: [
            { path: 'welcome', component: WelcomeComponent },
            {
                path: 'online/projects',
                loadChildren: './projects/project.module#ProjectModule',
                data: { online: true},
                canLoad: [RequireAuthenticatedUserRouteGuardService]
            },
            {
                path: 'offline/projects',
                loadChildren: './projects/project.module#ProjectModule',
                data: { online: false}
            },
            {
                path: 'departments',
                loadChildren: './departments/department.module#DepartmentModule'
            },            
      },
      { path: '**', component: PageNotFoundComponent }
    ];

@NgModule({
    imports: [RouterModule.forRoot(routes, {
        scrollPositionRestoration: 'enabled',
        enableTracing: true,
        preloadingStrategy: PreloadAllModules
      })],
    exports: [RouterModule]
})

然后在project.module.ts中...:

const projectRoutes: Routes = [
  { path: '', component: ProjectsTableComponent },
  { path: ':projectId', component: ProjectDetailComponent },
];

@NgModule({
  imports: [

    RouterModule.forChild(projectRoutes),
  ],

然后在我拥有的department.module.ts中...

const departmentRoutes: Routes = [
  { path: 'department/:deptId', component: DepartmentDetailComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(departmentRoutes),
  ]
})

这可行。

但是,这并不理想。我通过在我的部门路径路径中添加 NOT 所需的额外“部门/”来使其工作。如果要这样制作department.module.ts ...

const departmentRoutes: Routes = [
  { path: ':deptId', component: DepartmentDetailComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(departmentRoutes),
  ]
})

...此网址...

https://localhost:9999/departments/3694

被当作是这个...

https://localhost:9999/offline/projects/3694

但是 我的邮件已经到位,这个网址...

https://localhost:9999/departments/department/3694

可以正确解析。好。所以这是一种解决方法。但这似乎是不必要的。对这个可怜的灵魂有什么想法吗?我做错了什么?

1 个答案:

答案 0 :(得分:0)

在project.module中尝试在入口下面添加entryComponents:[]。在entryComponents中添加所有需要延迟加载的组件