咨询@ViewChild与@ContentChild访问子组件/DOM元素的全部有效选择器

嘿，我特意整理了Angular里@ViewChild和@ContentChild查询子组件、DOM元素时能用的所有有效选择器，结合你提到的HelloComponent例子来逐个说清楚：

1. 模板引用变量（最常用） #

给目标组件或DOM元素加个模板引用名（比如#helloRef），直接用这个名字就能查询：

<!-- 给HelloComponent加模板引用 -->
<hello #helloRef></hello>

// 组件类里查询
@ViewChild('helloRef') helloComp: HelloComponent;

这种方式最直观，想查哪个就给哪个加标记，不容易出错。

2. 组件/指令类直接引用 #

不用加任何模板标记，直接用组件或指令的类本身作为查询条件：

// 直接用HelloComponent类查询
@ViewChild(HelloComponent) helloComp: HelloComponent;

Angular会自动在视图/内容里找到第一个匹配的组件实例，适合整个视图里只有一个该组件的场景。

3. CSS元素选择器（含自定义组件标签） #

如果你的组件选择器是自定义标签（比如HelloComponent的selector设为hello），直接用这个标签名当字符串选择器就能查到：

@ViewChild('hello') helloComp: HelloComponent;

原生DOM元素也一样，比如想查页面里的第一个<input>：

@ViewChild('input') inputEl: ElementRef<HTMLInputElement>;

4. CSS属性选择器 #

支持两种属性选择器用法：

• 属性存在选择器：查询带有指定属性的元素，比如找带data-test属性的DOM元素：

<div data-test>我是测试元素</div>

@ViewChild('[data-test]') testEl: ElementRef<HTMLDivElement>;

• 属性精确匹配选择器：查询属性值完全匹配的元素，比如找type="password"的输入框：

<input type="password" placeholder="密码输入">

@ViewChild('[type="password"]') pwdInput: ElementRef<HTMLInputElement>;

⚠️ 注意：像前缀匹配[attr^="xxx"]、后缀匹配[attr$="xxx"]这类复杂属性选择器目前不支持，只能用精确匹配或属性存在的形式。

5. CSS类选择器 #

用.className的形式查询带有指定类的元素：

<div class="content-box">我是带类的容器</div>

@ViewChild('.content-box') boxEl: ElementRef<HTMLDivElement>;

如果多个元素有同一个类，只会返回第一个匹配的实例，要查所有的话得用@ViewChildren。

6. 指令选择器（类或字符串） #

和组件一样，自定义指令也可以用类或者它的选择器字符串查询：
比如有个HighlightDirective，它的选择器是[appHighlight]：

// 用指令类查询
@ViewChild(HighlightDirective) highlightDir: HighlightDirective;
// 或者用指令的选择器字符串查询
@ViewChild('[appHighlight]') highlightDir: HighlightDirective;

额外注意点 #

• 以上所有选择器同时适用于@ViewChild（查询组件自己视图内的元素）和@ContentChild（查询内容投影进来的元素）。
• 复杂CSS选择器比如后代选择器parent .child、相邻兄弟选择器div+p这类，Angular是不支持的，只能用上面列举的基础子集。
• 如果要获取所有匹配的元素/组件实例，记得用@ViewChildren或@ContentChildren，而不是单个的@ViewChild/@ContentChild。

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