如何让ng-content选中ng-container内元素？Angular渲染问题

为什么原始方法无效 #

Angular的<ng-content>是静态内容投影，只会匹配组件初始化时直接存在于插槽中的DOM元素。而你放在<ng-container>里的<input>是通过*ngIf、*ngFor这类结构指令动态生成的，这些动态元素不属于原始的投影节点集合，所以ng-content select="input"无法捕获到它们。

可行解决办法 #

办法1：使用内容查询（ContentChildren）替代ng-content

通过@ContentChildren查询所有后代中的<input>元素（包括动态生成的），然后在组件模板中主动渲染它们，既能精准捕获所有input，又能排除其他元素。

组件TS代码：

import { Component, ContentChildren, QueryList, ElementRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-input-wrapper',
  template: `
    <ng-container *ngFor="let inputEl of inputs">
      {{ inputEl.nativeElement.outerHTML }}
    </ng-container>
  `
})
export class InputWrapperComponent implements AfterContentInit {
  // 开启descendants捕获所有嵌套层级的input元素
  @ContentChildren(ElementRef<HTMLInputElement>, { descendants: true }) inputs!: QueryList<ElementRef<HTMLInputElement>>;

  ngAfterContentInit() {
    // 监听input元素的动态变化（比如*ngFor新增/删除）
    this.inputs.changes.subscribe(() => {
      // 可选：处理元素变化后的逻辑
    });
  }
}

使用方式（无需修改原有内容结构）：

<app-input-wrapper>
  <input id="1" />
  <input id="2" />
  <ng-container *ngIf="condition">
    <input [id]="item + 2" *ngFor="let item of [1, 2, 3, 4]" />
  </ng-container>
</app-input-wrapper>

办法2：给目标ng-container加标识，通过ng-content投影容器（简单快速）

如果不想修改组件TS逻辑，可以给需要投影的<ng-container>添加唯一标识（比如类或属性），然后通过ng-content同时投影直接的<input>和带标识的<ng-container>。

组件模板修改：

<!-- 投影直接的input -->
<ng-content select="input"></ng-content>
<!-- 投影带特定类的ng-container，内部input会自动渲染 -->
<ng-content select="ng-container.input-group"></ng-content>

内容代码修改（给ng-container加类）：

<input id="1" />
<input id="2" />
<ng-container *ngIf="condition" class="input-group">
  <input [id]="item + 2" *ngFor="let item of [1, 2, 3, 4]" />
</ng-container>

这个方法的优势是无需修改TS代码，缺点是需要确保只有目标<ng-container>带有该标识，避免无关容器被投影。

结论 #

直接用ng-content select="input"无法捕获动态生成的input，上述两种方法都能实现你的需求：

• 若追求最高的精准度和灵活性，优先选办法1；
• 若想快速解决问题且结构简单，选办法2。

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