Angular懒加载子模块后，如何在父组件视图中嵌入子组件？

你遇到的问题本质是懒加载子模块的组件作用域隔离——Angular的模块会封装自身的组件、指令等资源，父模块未直接导入子模块，自然无法识别子模块里的ChildHomeComponent选择器。下面给你几种可行的解决方案，按推荐程度排序：

方案一：利用嵌套路由与<router-outlet>（最推荐） #

这是Angular懒加载设计的原生用法，既符合框架规范，又能完美实现你的需求：

1. 修改父路由配置 #

将子模块路由配置为父路由的子路由，确保懒加载逻辑生效：

// parent-routing.module.ts
const parentRoutes: Routes = [
  {
    path: '',
    component: ParentHomeComponent,
    // 添加子路由配置，让子模块组件渲染在父组件内部
    children: [
      { 
        path: '', 
        // 推荐使用动态导入语法，确保代码分割生效
        loadChildren: () => import('./child/child.module').then(m => m.ChildModule), 
        canLoad: [ChildModuleGuard] 
      }
    ]
  },
];

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

2. 配置子模块路由 #

在子模块的路由文件中，将ChildHomeComponent设为默认路由：

// child-routing.module.ts
const childRoutes: Routes = [
  { path: '', component: ChildHomeComponent }
];

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

3. 在父组件模板中添加路由出口 #

把<router-outlet>放在你想要显示ChildHomeComponent的位置：

<!-- parent-home.component.html -->
<p> Parent-home works! </p>
<!-- 子模块组件会自动渲染到这个出口中 -->
<router-outlet></router-outlet>

这样当父路由激活时，子模块会通过懒加载加载完成，ChildHomeComponent会自动显示在父组件的路由出口位置，完全匹配你的需求。

方案二：动态加载组件（适合特殊场景） #

如果不想依赖路由导航，想要主动控制组件加载时机，可以用Angular的动态组件加载API：

1. 确保子模块组件可访问 #

在子模块中导出ChildHomeComponent，让外部模块能获取到它：

// child.module.ts
@NgModule({
  declarations: [ChildHomeComponent],
  imports: [ChildRoutingModule],
  exports: [ChildHomeComponent]
})
export class ChildModule { }

2. 在父组件中动态加载 #

通过ViewContainerRef和ComponentFactoryResolver手动创建并插入组件：

// parent-home.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-parent-home',
  template: `
    <p> Parent-home works! </p>
    <!-- 用来承载子组件的容器 -->
    <div #childContainer></div>
  `
})
export class ParentHomeComponent {
  @ViewChild('childContainer', { read: ViewContainerRef }) childContainer!: ViewContainerRef;

  async ngOnInit() {
    // 懒加载子模块及其组件
    const { ChildModule, ChildHomeComponent } = await import('./child/child.module');
    
    // 创建模块引用并获取组件工厂
    const moduleRef = await ChildModule.create(this.childContainer.injector);
    const componentFactory = moduleRef.injector.get(ComponentFactoryResolver)
      .resolveComponentFactory(ChildHomeComponent);
    
    // 在容器中渲染子组件
    this.childContainer.createComponent(componentFactory);
  }
}

这种方式不需要依赖路由，但实现相对繁琐，适合需要自定义加载时机（比如点击按钮触发加载）的场景。

方案三：共享组件模块（不推荐，会破坏懒加载） #

如果把ChildHomeComponent放到一个共享模块中，父模块和子模块都导入这个共享模块，父组件就能直接使用<app-child-home>标签。但这种方式会导致ChildHomeComponent被打包到父模块的代码块中，完全失去懒加载的意义，因此不推荐。

内容的提问来源于stack exchange，提问作者firasKoubaa