Angular中ViewChild组件选择器与查询选择器的区别、适用场景及性能对比

核心区别 #

• 匹配逻辑不同
  • 模板引用变量（如#hello）：精准匹配模板中明确标记了该变量的组件、指令或原生DOM元素，是实例级的精准定位。
  • 组件类选择器（如HelloComponent）：匹配模板中第一个属于该类的组件实例，是类型级的模糊匹配（如果有多个同类型组件，只会取第一个）。
• 适用范围不同
  • 模板引用变量可以作用于任意模板元素：原生DOM（如<input #email>）、组件、指令都能标记。
  • 组件类选择器只能匹配组件或指令类，无法直接获取原生DOM元素。

适用场景 #

优先用模板引用变量的情况 #

• 模板中存在多个同类型组件/指令，需要定位特定某一个实例时；
• 需要获取原生DOM元素或指令实例时；
• 希望明确区分模板中不同实例的职责时（比如一个表单里多个输入框，用不同变量标记）。

示例1（模板引用变量方式）：

<!-- app.component.html -->
<hello #hello></hello>

// app.component.ts
@ViewChild('hello') hello: HelloComponent;

优先用组件类选择器的情况 #

• 模板中该组件只有一个实例，无需区分；
• 更关注组件类型而非具体实例，想让代码更简洁（不用在模板额外加引用变量）；
• 后续重构时，只要组件类名不变，无需修改模板内容。

示例2（组件类选择器方式）：

<!-- app.component.html -->
<hello></hello>

// app.component.ts
@ViewChild(HelloComponent) hello: HelloComponent;

性能对比 #

• 组件类选择器的性能更优：Angular在编译阶段就能通过组件类型生成直接的查询逻辑，运行时无需遍历模板中的引用标记，查询开销更低。
• 模板引用变量的查询需要在运行时匹配模板中的标记，相对开销略高，但在绝大多数业务场景下差异可以忽略，只有在大量重复查询或性能敏感的高频组件中，才需要优先考虑类选择器。

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