Angular中如何实现运行时嵌套动态组件？（对标React实现）

我完全懂你在React里的那种顺畅体验——直接通过props传入组件类，然后嵌套渲染就行。但Angular因为是静态编译的特性，实现这种把一个运行时确定的动态组件作为另一个动态组件的内容子组件的需求，确实需要结合它的动态组件API和视图容器的特性来操作，下面我给你一步步拆解可行的方案：

核心思路 #

React里的内容子组件本质是props传递的子元素，而Angular里要实现动态嵌套，不能直接用静态的ng-content（它只处理预定义的静态内容投影），得靠ViewContainerRef来动态管理组件的插入位置——简单说就是让父动态组件预留一个“插槽”，我们把动态创建的子组件插入到这个插槽里。

具体实现步骤 #

1. 准备父动态组件（预留内容插槽） #

首先，你的父动态组件需要在模板里预留一个用于插入子组件的容器，并在组件类中暴露这个容器对应的ViewContainerRef：

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

@Component({
  template: `
    <div class="parent-wrapper">
      <h3>我是父动态组件</h3>
      <!-- 这就是子组件的插入插槽 -->
      <div #childSlot></div>
    </div>
  `
})
export class ParentDynamicComponent {
  // 暴露插槽的ViewContainerRef，供外部插入子组件
  @ViewChild('childSlot', { read: ViewContainerRef }) childSlot!: ViewContainerRef;
  
  // 可以定义父组件需要接收的props
  parentProp!: string;
}

2. 准备子动态组件（常规组件即可） #

子组件就是普通的Angular组件，不需要特殊处理，比如：

// child-dynamic.component.ts
import { Component } from '@angular/core';

@Component({
  template: `<p>我是子动态组件，接收的props：{{ childProp }}</p>`
})
export class ChildDynamicComponent {
  childProp!: string;
}

3. 在宿主组件中实现嵌套渲染 #

在需要触发动态渲染的宿主组件里，我们用ViewContainerRef.createComponent方法先创建父组件，再拿到父组件的插槽，插入子组件：

// host.component.ts
import { Component, ViewContainerRef, ComponentRef, Type, OnDestroy } from '@angular/core';
import { ParentDynamicComponent } from './parent-dynamic.component';
import { ChildDynamicComponent } from './child-dynamic.component';

@Component({
  selector: 'app-host',
  template: `<button (click)="renderNested()">渲染嵌套动态组件</button>`
})
export class HostComponent implements OnDestroy {
  // 存储组件引用，用于销毁清理
  private componentRefs: ComponentRef<any>[] = [];

  constructor(private viewContainerRef: ViewContainerRef) {}

  async renderNested() {
    // 先清空之前的动态组件（如果需要）
    this.viewContainerRef.clear();
    this.componentRefs.forEach(ref => ref.destroy());
    this.componentRefs = [];

    // 1. 创建父动态组件实例（如果组件是通过props传入的类，直接替换这里的ParentDynamicComponent即可）
    const parentRef = this.viewContainerRef.createComponent(ParentDynamicComponent);
    this.componentRefs.push(parentRef);

    // 给父组件传入props
    parentRef.instance.parentProp = '来自宿主的父组件参数';

    // 2. 拿到父组件的插槽，创建子动态组件实例
    const childRef = parentRef.instance.childSlot.createComponent(ChildDynamicComponent);
    this.componentRefs.push(childRef);

    // 给子组件传入props
    childRef.instance.childProp = '来自宿主的子组件参数';
  }

  // 组件销毁时清理动态组件，避免内存泄漏
  ngOnDestroy() {
    this.componentRefs.forEach(ref => ref.destroy());
  }
}

4. 处理动态导入的组件（如果组件类是异步获取的） #

如果你的父/子组件类是通过props异步传入的（比如从远程加载或者动态导入），只需要把组件类的获取改成异步方式即可：

// 示例：动态导入组件
async getDynamicComponent(componentPath: string): Promise<Type<any>> {
  const componentModule = await import(componentPath);
  // 假设导出的组件类名是默认导出或者指定名称
  return componentModule.default || componentModule[Object.keys(componentModule)[0]];
}

// 在renderNested中使用
const ParentComponent = await this.getDynamicComponent('./parent-dynamic.component');
const ChildComponent = await this.getDynamicComponent('./child-dynamic.component');

关键注意点 #

• 为什么不用ng-content？：ng-content是静态内容投影，只能投影组件模板中预定义的内容，无法处理运行时动态创建的组件，所以必须用ViewContainerRef来动态插入。
• 组件销毁：一定要记得在宿主组件销毁时调用componentRef.destroy()，否则会造成内存泄漏。
• 组件注册：Angular 9+之后不需要再在entryComponents里注册动态组件，只要组件被模块声明或者通过动态导入即可。

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