如何在 Angular 中使用模板引用变量
介绍
Angular 等 JavaScript 框架在原生文档对象模型 (DOM) 之上提供了出色的抽象和实用的 API，可让您的代码库更具可读性、可维护性和效率。但是，当您需要以类型安全的方式直接访问 DOM 上的 HTML 元素时，您会怎么做？
Angular 的模板引用变量提供了一个实用的 API，您可以通过它直接在 Angular 代码中与 DOM 元素和子组件进行交互。在接下来的部分中，您将了解什么是模板引用变量，以及如何在 Angular 组件和服务中使用它们来对所引用的模板元素进行低级手动控制。
入门
要开始使用模板引用变量，只需创建一个新的 Angular 组件或访问现有组件。要创建模板引用变量，请找到要引用的 HTML 元素，然后按如下方式标记它：#myVarName。在下面的代码中，创建了一个模板引用变量，该变量引用id 为test-div 的<div>。
<div id="test-div" #myTestDiv>
</div>
使用 ViewChild 访问模板元素
成功创建对模板中的 HTML 元素的引用后，您现在可以在相关的 Angular 组件 TypeScript 文件中访问该元素。
在 Angular 组件中，使用Angular 提供的ViewChild装饰器绑定到之前创建的模板引用变量。对于 HTML 元素，使用ViewChild装饰器创建一个新的ElementRef，如下所示：
@ViewChild('myTestDiv') myTestDiv: ElementRef;
当您像这样使用其nativeElement字段时，此ElementRef可让您的组件直接访问底层 HTML 元素：
const divEl: HTMLDivElement = this.myTestDiv.nativeElement;
警告：模板引用变量将保持为空/未定义，直到组件的视图部分完成启动。请确保您仅在ngAfterViewInit生命周期钩子内或在此钩子完成后尝试使用这些变量！
有关ElementRef类型的更多信息，请查看 Angular文档。
将模板引用变量与子组件一起使用
访问 Angular 模板中的底层 HTML 元素很棒，但如果您想访问模板中的子组件怎么办？使用模板引用变量也很容易。
使用上面相同的语法，您可以在子组件上创建模板引用变量，如下所示：
<app-test-component #myTestComp></app-test-component>
引用子组件后，您就可以在 Angular 组件类中访问它，如下所示：
@ViewChild('myTestComp') myTestComp: TestComponent;
成功捕获子组件后，您可以像这样访问它：
ngAfterViewInit(): void {
// We can access the TestComponent now that this portion of the view tree has been initiated.
this.myTestComp.saveTheWorld();
}
结论
在本指南中，您了解了 Angular 框架中的模板引用变量是什么，以及如何使用它们来获取对位于 DOM 和子组件上的 HTML 元素的类型引用。
现在，您应该对自己能够使用模板引用变量同时避免变量命名冲突的能力充满信心。掌握模板引用变量将使您能够创建类型安全的解决方案，以应对 5-10% 的情况，在这些情况下，Angular 框架的直接 DOM 元素绑定不够用，需要更手动的解决方案。
了解更多
探索 Pluralsight 的这些 Angular 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~