Angular组件是否有类似TemplateRef的对象用于条件/动态内容投影？

首先明确：不存在与TemplateRef直接等价的ComponentRef对象，能通过内容查询的read选项读取。因为内容投影进来的<app-some-compA>/<app-some-compB>已经是Angular实例化后的组件实例，而ComponentRef是调用createComponent()时才会生成的实例包装对象，并非可通过内容查询获取的目标类型。

要实现用组件替代模板的逻辑，核心思路是查询投影组件的构造函数类型，再用该类型调用createComponent()创建新实例，具体实现如下：

1. 定义标记指令（可选但更灵活） #

用指令标记需要被查询的投影组件，方便统一筛选：

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

@Directive({
  selector: '[tag]'
})
export class TagDirective {}

2. 宿主组件实现内容查询与组件创建 #

在app-host组件中，查询带标记指令的组件实例，提取其构造函数类型，再用于创建新组件：

import { Component, ContentChildren, QueryList, ViewContainerRef } from '@angular/core';
import { TagDirective } from './tag.directive';

@Component({
  selector: 'app-host',
  template: `<ng-content></ng-content>`
})
export class AppHostComponent {
  // 读取带tag指令的组件实例，后续从中提取构造函数类型
  @ContentChildren(TagDirective, { read: Object }) taggedComponents: QueryList<any>;

  constructor(private readonly container: ViewContainerRef) {}

  createNew(componentIndex: number) {
    const targetComponent = this.taggedComponents.toArray()[componentIndex];
    if (!targetComponent) return;

    // 获取组件的构造函数类型
    const ComponentClass = targetComponent.constructor;
    // 创建新的组件实例
    this.container.createComponent(ComponentClass);
  }
}

3. 使用方式（保持原有投影结构） #

<app-host>
  <app-some-compA tag>原始组件A内容</app-some-compA>
  <app-some-compB tag>原始组件B内容</app-some-compB>
</app-host>

补充说明 #

• 若不需要统一标记，也可直接查询具体组件类型，比如@ContentChildren(SomeComponentA)，但用指令标记更适合多组件类型的场景。
• Angular 9+支持直接向createComponent()传入组件构造函数类型，无需手动通过ComponentFactoryResolver解析工厂类。
• 投影进来的原始组件实例会保留在DOM中，若不需要显示原始实例，可在宿主组件中隐藏它们（比如用[hidden]或CSS）。

内容的提问来源于stack exchange，提问作者Robin De Schepper