0Pricing
Angular Academy · 课时

使用 viewChild 查询视图

将子元素查询为信号。

使用 viewChild 查询视图 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

查询视图

组件通常需要引用其模板中的元素或子组件。现代 Angular 提供了基于信号的 viewChild() 查询函数。

声明 viewChild

使用模板引用名称或组件类型调用 viewChild()。返回结果是一个信号。

import { Component, viewChild, ElementRef } from "@angular/core";

@Component({
  selector: "app-form",
  template: "<input #box>"
})
export class FormComponent {
  box = viewChild<ElementRef>("box");
}

读取查询结果

与所有信号一样，通过调用它来读取视图查询结果。在视图准备就绪之前，它会返回匹配的元素或 undefined。

focus() {
  this.box()?.nativeElement.focus();
}

查询子组件

传入组件类，即可获得对子组件实例的类型化引用。

import { viewChild } from "@angular/core";

child = viewChild(ChildComponent);

run() {
  this.child()?.doSomething();
}

必需的视图查询

当查询的元素必须存在时，请使用 viewChild.required()。这样，该信号就不会为空。

box = viewChild.required<ElementRef>("box");

focus() {
  this.box().nativeElement.focus(); // no optional chaining
}

查询多个元素

viewChildren() 返回一个信号，其中包含所有匹配项组成的只读数组。

import { viewChildren } from "@angular/core";

items = viewChildren(ItemComponent);

count() {
  return this.items().length;
}

查询何时解析

基于信号的视图查询会在视图初始化后解析。在 effect 中读取它们，可确保在它们可用后再执行操作。

constructor() {
  effect(() => {
    const el = this.box();
    if (el) el.nativeElement.focus();
  });
}

viewChild 与 ViewChild 装饰器

信号 viewChild() 取代了传统的 @ViewChild 装饰器，与信号集成，并在许多情况下避免手动处理生命周期时机。

// classic:
@ViewChild("box") box!: ElementRef;

// modern:
box = viewChild<ElementRef>("box");

读取特定令牌

read 选项允许您从匹配的元素中查询不同的令牌，例如指令或 ElementRef。

tooltip = viewChild("trigger", { read: TooltipDirective });

使用 contentChild 处理投影

如果要查询投影内容而不是组件自身的视图，请使用对应的 contentChild() 和 contentChildren() 查询。

import { contentChild } from "@angular/core";

header = contentChild(HeaderComponent);

选择合适的查询

对于您自己的模板，请使用视图查询；对于投影内容，请使用内容查询。如果目标必须存在，请选择必需变体；如果要查询集合，请选择复数变体。

快速检查

检验您对基于信号的视图查询的理解。

总结

信号 viewChild() 可查询组件视图中的元素和子组件；使用 viewChild.required() 查询必定存在的目标，使用 viewChildren() 查询集合，使用 read 选项查询特定令牌，并使用 contentChild() 查询投影内容。

常见问题解答

「使用 viewChild 查询视图」课时是免费的吗？

是的 — 「使用 viewChild 查询视图」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「使用 viewChild 查询视图」这节课中我会学到什么？

将子元素查询为信号。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「使用 viewChild 查询视图」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 input() 的信号输入
  2. 必需输入与转换输入
  3. 使用 output() 输出事件
  4. 使用 viewChild 查询视图
← 返回 Angular Academy