Angular Lazy 加载模块 - 子路由中的问题

Question

我有一些模块:“dashboard”、“family”和“children”。这些模块延迟加载到我的 appRoute 中，除了“childen”模块:

export const appRoutes: Routes = [
  { path: '', loadChildren: 'app/dashboard/dashboard.module#DashboardModule' },
  { path: 'family', loadChildren: 'app/family/family.module#FamilyModule' },
  {
    path: '404',
    component: Error404PageComponent,
    resolve: { data: Error404PageResolver }
  },
  {
    path: '**',
    component: Error404PageComponent,
    resolve: { data: Error404PageResolver }
  }
];


@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, {
    preloadingStrategy: PreloadAllModules,
    useHash: false
  }) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

我家的路线文件是这样的:

const familyRoutes: Routes = [
    {
        path: '',
        component: FamilyComponent
    {
        path: ':id',
        component: FamilleComponent     
];

@NgModule({
    imports: [RouterModule.forChild(familyRoutes)],
    exports: [RouterModule]
})
export class FamilyRoutingModule { }

对于我的“ child ”模块，它几乎是相同的东西，除了路线，路线的第一部分包含家庭路线:

const childRoutes: Routes = [
  {
    path: 'family/:familyId/child',
    component: ChildComponent
  },
  {
    path: 'family/:familyId/child/:id',
    component: ChildComponent
  }
];

我想延迟加载“children”模块，但我不知道该怎么做，因为这个模块是“family”模块的子模块。我的问题是链接到 child 的路线不可用。所以网址 http://localhost:4200/family/830503261/child/830581020不管用。

我尝试在 familyRoutes 中添加 loadChildren 行，但不起作用:

const familleRoutes: Routes = [
    {
        path: '',
        component: FamilyComponent
    {
        path: ':id',
        component: FamilyComponent,     
        loadChildren: './../child/child.module#ChildModule' 
];

我不知道如何使用路径中的“家庭”路径访问我的 child 。

有什么想法吗？谢谢。

Answer 1

您应该将您的 childModule 配置为家庭路线的 child

    const familyRoutes: Routes = [
        {
            path: '',
            component: FamilyComponent
        },
        {
            path: ':id',
            component: FamilleComponent,
            children: [
                'path': 'child',
                'loadChildren': './../child/child.module#ChildModule', // <- or whatever path

            ]
        }

    ];

    @NgModule({
        imports: [RouterModule.forChild(familyRoutes)],
        exports: [RouterModule]
    })
    export class FamilyRoutingModule { }

并改变你的childModule的路线

const childRoutes: Routes = [
  {
    path: '',
    component: ChildComponent
  },
  {
    path: ':id',
    component: ChildComponent
  }
];