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]
  },
];