Angular技术问题：如何将动态加载组件嵌套进另一组件

你不需要专门创建一个“包装组件”来关联sub-component和wrapping-component，直接通过先动态创建外层包裹组件，再在其内部容器中插入子组件的方式就能实现目标DOM结构，而且更简洁。

核心思路 #

1. 让wrapping-component暴露一个内部的ViewContainerRef，用来承载动态插入的sub-component
2. 在宿主组件中，先动态生成wrapping-component实例，再拿到它的内部容器，最后在容器里创建sub-component

具体实现步骤 #

1. 改造WrappingComponent，添加内部容器

在wrapping-component的模板里定义一个带模板引用的容器，并用@ViewChild获取它的ViewContainerRef：

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'wrapping-component',
  template: `
    <div class="wrapping-styles">
      <!-- 这个容器将用来承载动态创建的sub-component -->
      <div #innerContainer></div>
    </div>
  `
})
export class WrappingComponent {
  @ViewChild('innerContainer', { read: ViewContainerRef }) innerContainer: ViewContainerRef;
}

2. 在宿主组件中完成动态嵌套

在需要生成组件的宿主组件里，通过ViewContainerRef先创建wrapping-component，再在其内部容器中插入sub-component：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { WrappingComponent } from './wrapping.component';
import { SubComponent } from './sub.component';

@Component({
  selector: 'app-host',
  template: `<div class="container" #targetContainer></div>`
})
export class HostComponent {
  @ViewChild('targetContainer', { read: ViewContainerRef }) targetContainer: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    // 批量创建嵌套组件（示例创建2组）
    for (let i = 0; i < 2; i++) {
      // 步骤1：创建wrapping-component实例
      const wrapFactory = this.resolver.resolveComponentFactory(WrappingComponent);
      const wrapComponentRef = this.targetContainer.createComponent(wrapFactory);

      // 步骤2：拿到wrapping-component内部的容器
      const innerContainer = wrapComponentRef.instance.innerContainer;

      // 步骤3：在内部容器中创建sub-component
      const subFactory = this.resolver.resolveComponentFactory(SubComponent);
      innerContainer.createComponent(subFactory);
    }
  }
}

方案对比 #

• 你的现有方案（创建专门包装组件）：如果嵌套逻辑复杂、需要多处复用这个“wrap+sub”的组合，这种方式有维护性优势，但会多一层组件定义
• 上述动态嵌套方案：无需额外组件，直接在宿主组件中完成两层组件的关联，代码更紧凑，完全符合你期望的DOM结构

注意事项 #

• 确保WrappingComponent和SubComponent都在模块的declarations/exports中声明（Angular 9+ 无需手动添加到entryComponents，Ivy 会自动处理）
• 如果wrapping-component原本用ng-content做内容投影，也可以保留，只需要把内部容器放在ng-content的位置即可兼容原有逻辑

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