如何将动态创建的组件作为另一动态组件的ng-content传入？

要实现组件B的内容通过<ng-content>投影到组件A中，核心是先提取组件B中指令对应的DOM节点，再将这些节点作为投影内容传入组件A的创建配置，而非直接追加组件B实例。具体步骤如下：

• 第一步：在组件B中暴露指令元素
  在组件B类中通过@ViewChild获取带有modal-header和modal-content指令的元素引用，方便后续提取节点：

  import { Component, ViewChild, ElementRef } from '@angular/core';
  import { ModalHeaderDirective, ModalContentDirective } from './modal-directives';
  
  @Component({
    selector: 'app-modal-content',
    template: `
      <div modal-header>自定义头部</div>
      <div modal-content>自定义内容区域</div>
    `
  })
  export class ModalContentComponent {
    @ViewChild(ModalHeaderDirective, { read: ElementRef }) headerElement!: ElementRef;
    @ViewChild(ModalContentDirective, { read: ElementRef }) contentElement!: ElementRef;
  }
  

• 第二步：提取组件B的节点并投影到组件A
  在ModalPopupComponent中，先临时创建组件B实例，提取所需节点后销毁实例，再将节点作为projectableNodes参数传入组件A的创建方法：

  import { Component, ViewContainerRef, ComponentRef } from '@angular/core';
  import { ModalComponent } from './modal.component';
  import { ModalContentComponent } from './modal-content.component';
  
  @Component({
    selector: 'app-modal-popup',
    template: ''
  })
  export class ModalPopupComponent {
    constructor(private viewContainerRef: ViewContainerRef) {
      this.openModal(ModalContentComponent);
    }
  
    openModal(componentType: any) {
      // 临时创建组件B实例以提取内容节点
      const bComponentRef: ComponentRef<any> = this.viewContainerRef.createComponent(componentType);
      const headerNode = bComponentRef.instance.headerElement.nativeElement;
      const contentNode = bComponentRef.instance.contentElement.nativeElement;
  
      // 创建组件A，传入投影节点
      const aComponentRef = this.viewContainerRef.createComponent(ModalComponent, {
        projectableNodes: [[headerNode], [contentNode]]
      });
  
      // 销毁临时的组件B实例
      bComponentRef.destroy();
    }
  }
  

• 第三步：确保组件A的模板匹配投影选择器
  组件A的模板中，<ng-content>要通过select属性匹配对应的指令选择器，才能正确接收投影内容：

  <div class="modal">
    <div class="modal-header">
      <ng-content select="[modal-header]"></ng-content>
    </div>
    <div class="modal-body">
      <ng-content select="[modal-content]"></ng-content>
    </div>
  </div>
  

这样就能实现组件B中指定指令的内容精准投影到组件A的对应位置，而非简单追加组件B到组件A末尾。

内容的提问来源于stack exchange，提问作者Get Off My Lawn