如何在 Angular 组件模板中选择元素：TypeScript 完整指南

为什么简单的 document.querySelector 在 Angular 中不起作用？

想象一下：您正在编写您的第一个 Angular 应用程序，并且需要访问组件模板中的普通 <div> 或 <input>。第一个想法是使用老牌的 document.querySelector。但问题来了：控制台中显示的是 null 或 undefined。熟悉吗？

Angular 不仅仅是一个用于操作 DOM 的库。它是一个框架，使用自己建立在真实 DOM 之上的抽象层。通过全局选择器直接访问元素会破坏框架的架构，可能导致内存泄漏和性能问题。但主要原因是 Angular 使用虚拟 DOM 和 Shadow DOM（取决于封装策略），因此您的 document.querySelector 根本看不到组件内部的元素。

幸运的是，Angular 开发者提供了一个优雅的解决方案——ViewChild 和 ViewChildren 装饰器。在本文中，我们将探讨如何使用 TypeScript 正确选择组件模板中的元素，并介绍所有潜在陷阱。

访问模板元素的主要方法

在 Angular 中，有三种主要方法可以选择组件模板中的元素：

\n
• 模板引用变量 (Template Reference Variables) — 用于快速访问的最简单方法
\n
• ViewChild 装饰器 — 用于访问单个元素或组件
\n
• ViewChildren 装饰器 — 用于访问同类元素的集合
\n

每种方法都有其特点，适用于不同的场景。让我们详细了解一下。

1. 模板引用：最快的方法

模板引用是 Angular 的一个“技巧”，它允许您直接在模板中访问 DOM 元素，而无需在组件类中编写代码。您只需在所需元素上放置 #引用名称。

// component.html\n<input #myInput type="text" placeholder="输入文本">\n<button (click)="focusInput(myInput)">聚焦输入框</button>

在这个例子中，#myInput 是一个模板引用。它会自动创建一个变量，可以传递给组件的方法。请注意：我们传递的是元素本身，而不是它的值。

// component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: './example.component.html'\n})\nexport class ExampleComponent {\n  focusInput(inputElement: HTMLInputElement): void {\n    inputElement.focus();\n    inputElement.style.borderColor = '#4CAF50';\n  }\n}

重要的一点：模板引用仅在模板范围内可用。您不能直接在组件类中使用它们。为此，您需要装饰器。

2. ViewChild：访问单个元素

@ViewChild 装饰器是从组件类访问元素或子组件的主要工具。它基于选择器工作：您可以通过模板引用、组件类型或 CSS 选择器（有限制）进行查找。

// component.ts\nimport { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    <div #myDiv>我们将选择这个元素</div>\n    <p #myParagraph>还有这个</p>\n  `\n})\nexport class ExampleComponent implements AfterViewInit {\n  @ViewChild('myDiv') myDiv!: ElementRef;\n  @ViewChild('myParagraph') myParagraph!: ElementRef;\n\n  ngAfterViewInit(): void {\n    // 重要！只有在视图初始化后才能访问元素\n    console.log(this.myDiv.nativeElement.textContent); // "我们将选择这个元素"\n    this.myPara