ContentChildren能否选择原生HTML组件？Angular如何获取内容子元素input的ElementRef

1. ContentChildren是否可以选择原生HTML组件？ #

当然可以！不过要注意，原生HTML元素本身并不是Angular组件或指令，所以不能直接像选择自定义组件那样用类名来定位。你需要通过元素标签选择器（比如input、div这类）来指定目标，同时必须在@ContentChildren的配置选项里加上read: ElementRef——因为默认情况下，Angular不会自动为原生元素返回ElementRef实例，得明确告诉它我们要读取什么。

2. 如何获取传入的元素的ElementRef实例？ #

你之前的写法没效果，问题出在选择器的理解上：'input'在@ContentChildren里会被解析成模板引用变量的名称，而不是HTML元素的标签选择器。要选中所有原生<input>元素，得调整两个地方：

1. 把选择器明确指定为元素标签input（本质是CSS元素选择器）
2. 加上read: ElementRef选项，让Angular返回元素的引用实例

正确的代码示例如下：

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

@Component({
  selector: 'app-your-component',
  template: `<ng-content></ng-content>`
})
export class YourComponent implements AfterContentInit {
  // 关键配置：元素选择器+read选项+开启后代查找
  @ContentChildren('input', { read: ElementRef, descendants: true }) 
  _inputChildren!: QueryList<ElementRef<HTMLInputElement>>;

  ngAfterContentInit() {
    // 内容初始化完成后就能拿到所有input元素了
    this._inputChildren.forEach(inputRef => {
      console.log('找到的input元素:', inputRef.nativeElement);
    });
  }
}

如果你愿意创建额外的指令（虽然你想避免），也可以写一个空指令来匹配所有<input>：

// 新建一个input指令
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: 'input'
})
export class InputDirective {
  constructor(public elementRef: ElementRef<HTMLInputElement>) {}
}

然后在组件中这样获取：

@ContentChildren(InputDirective, { descendants: true }) 
_inputChildren!: QueryList<InputDirective>;

// 使用时通过指令的elementRef获取元素
this._inputChildren.forEach(inputDir => {
  console.log(inputDir.elementRef.nativeElement);
});

不过显然第一种方法更符合你的需求，不需要额外创建指令就能直接拿到目标元素的ElementRef。

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