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的一部分（因为我没有直接导入它）;

如何处理？

我希望如果模块已加载，我的 child home componen t会显示在父主页组件

下

建议??

Answer 1

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

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

Answer 2

这是你应该懒加载你的孩子模块：

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

Angular：延迟加载子模块并将其主要组件注入Parent home组件

2 个答案: