Angular：延迟加载子模块并将其主要组件注入到“父home”组件的“视图”中

Question

我有一个父模块，在这里我懒于加载子模块

如您所见，我没有直接导入我的子模块，但是我在路由文件下懒洋洋地加载了它：

父模块：

@NgModule({
  imports: [
    CommonModule,
    ParentRoutingModule,
  ],
  exports: [
    ParentRoutingModule
  ],

  declarations: [ParentComponent]
})
export class ParentModule { }

父路由模块：

const parentRoutes: Routes = [
  {path: '', component: ParentHomeComponent}, 
  {
    path: '',
    loadChildren: () => ChildModule,
    canLoad: [ChildModuleGuard]
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(parentRoutes)
  ],
  declarations: [],
  exports: [
    RouterModule
  ]
})
export class ParentRoutingModule { }

在我的主要ParentModule组件中； 在ParentHomeComponent我想注入我ChildHomeCOmponent认为，像这样的：

<p>
  Parent-home works!
</p>
<app-Child-home></app-Child-home>

但这引发了一个错误，告诉您ChildHomeComponent不是ParentModule的一部分（因为我没有直接导入它）；

如何处理？

我希望如果模块已加载 ，则我的孩子家庭组件会显示在父家庭组件下

建议??

Answer 1

这不是Angular中的延迟加载方式。

非延迟加载的模块无法访问延迟加载的模块中的组件。

Answer 2

这是应该延迟加载子模块的方式：

const parentRoutes: Routes = [
  {path: '', component: ParentHomeComponent}, 
  {
    path: '',
    loadChildren: 'path/ChildModule#ChildModule',
    canLoad: [ChildModuleGuard]
  },
];