如何向动态创建的EmbeddedViewRef动态添加子视图？

问题分析 #

你尝试通过模板动态创建嵌套组件时，直接使用renderer.appendChild移动DOM节点会脱离Angular的视图管理，导致模板上下文绑定丢失，所以子组件无法正确渲染数据。正确的做法是利用Angular的ViewContainerRef在父视图的指定容器中插入子视图，保持上下文关联。

方案一：基于TemplateRef的嵌套动态创建 #

这种方案无需额外创建组件，通过模板和指令实现嵌套视图的动态插入：

步骤1：定义辅助指令（用于获取父视图内的容器）

创建一个简单指令，用来暴露父模板内容器的ViewContainerRef：

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

@Directive({
  selector: '[childContainerHost]'
})
export class ChildContainerHostDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}

步骤2：修改模板结构

在父模板内添加带指令的容器，用于放置子组件：

<ng-container #container></ng-container>

<!-- 父组件模板 -->
<ng-template #componentGroupRef>
  <div myComponentGroupDirective>
    <!-- 子组件容器，通过指令暴露ViewContainerRef -->
    <ng-container childContainerHost></ng-container>
  </div>
</ng-template>

<!-- 子组件模板 -->
<ng-template #myButtonRef let-data>
  <button myButtonDirective [someProp]="data.someProp">{{ data.labelProp }}</button>
</ng-template>

步骤3：动态创建嵌套视图

在组件代码中，先创建父视图，再获取内部容器并插入子视图：

import { Component, ViewChild, ViewContainerRef, TemplateRef, EmbeddedViewRef } from '@angular/core';
import { ChildContainerHostDirective } from './child-container-host.directive';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true })
  protected container!: ViewContainerRef;

  @ViewChild('componentGroupRef', { read: TemplateRef })
  protected componentGroupRef!: TemplateRef<any>;

  @ViewChild('myButtonRef', { read: TemplateRef })
  protected myButtonRef!: TemplateRef<any>;

  ngOnInit() {
    // 模拟子组件数据
    const buttonDataList = [
      { someProp: 'btn-prop-1', labelProp: '按钮1' },
      { someProp: 'btn-prop-2', labelProp: '按钮2' }
    ];

    // 1. 创建并插入父视图
    const parentViewRef: EmbeddedViewRef<any> = this.componentGroupRef.createEmbeddedView({});
    this.container.insert(parentViewRef);

    // 2. 从父视图中获取子容器的ViewContainerRef
    const childContainerDirective = parentViewRef.find(ChildContainerHostDirective);
    if (childContainerDirective) {
      const childViewContainer = childContainerDirective.viewContainerRef;

      // 3. 遍历数据创建子视图并插入容器
      buttonDataList.forEach(data => {
        const buttonViewRef = this.myButtonRef.createEmbeddedView({ $implicit: data });
        childViewContainer.insert(buttonViewRef);
      });
    }
  }
}

方案二：基于独立组件的嵌套动态创建（更符合Angular组件化思想） #

将父容器封装为独立组件，内部管理子组件的创建，结构更清晰易维护：

步骤1：创建父组件

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

@Component({
  selector: 'app-component-group',
  template: `
    <div myComponentGroupDirective>
      <ng-container #childContainer></ng-container>
    </div>
  `
})
export class ComponentGroupComponent {
  @ViewChild('childContainer', { read: ViewContainerRef })
  childContainer!: ViewContainerRef;

  @Input() set buttonData(dataList: any[]) {
    this.childContainer.clear();
    dataList.forEach(data => {
      // 若子组件是模板，可传入TemplateRef并创建视图
      if (this.buttonTemplate) {
        const viewRef = this.buttonTemplate.createEmbeddedView({ $implicit: data });
        this.childContainer.insert(viewRef);
      }
    });
  }

  @Input() buttonTemplate!: TemplateRef<any>;
}

步骤2：在父组件中动态创建嵌套组件

import { Component, ViewChild, ViewContainerRef, TemplateRef, ComponentFactoryResolver } from '@angular/core';
import { ComponentGroupComponent } from './component-group.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true })
  protected container!: ViewContainerRef;

  @ViewChild('myButtonRef', { read: TemplateRef })
  protected myButtonRef!: TemplateRef<any>;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    const buttonDataList = [
      { someProp: 'btn-prop-1', labelProp: '按钮1' },
      { someProp: 'btn-prop-2', labelProp: '按钮2' }
    ];

    // 创建父组件工厂
    const groupFactory = this.resolver.resolveComponentFactory(ComponentGroupComponent);
    // 创建父组件实例
    const groupComponentRef = this.container.createComponent(groupFactory);
    // 传入子组件模板和数据
    groupComponentRef.instance.buttonTemplate = this.myButtonRef;
    groupComponentRef.instance.buttonData = buttonDataList;
  }
}

关键说明 #

• 避免直接操作DOM节点（如renderer.appendChild），因为这会脱离Angular的视图变更检测和上下文绑定机制。
• 利用ViewContainerRef管理视图的插入、移除，确保Angular能正确跟踪视图的上下文和数据绑定。

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