Angular模板引用变量如何实现高效引用与操作？

本文共计996个文字，预计阅读时间需要4分钟。

本篇教程将继续学习Angular，带大家深入了解Angular中的模板引用变量。希望对大家有所帮助！

本篇文章继续学习Angular，带大家了解一下Angular中的模板引用变量，希望对大家有所帮助！

<input type="text" [value]="value" #name>

1. 模板引用变量可以是Angualr模板中的DOM元素、Angular组件（指令)，元素，TemplateRef,甚至Web组件的引用，而它具体是什么，则取决于它所依附的元素（不使用指令进行干预时）。如前文示例代码中的模板引用变量name就是<input>这一DOM元素的引用。

<app-component #component [input]="variable"></app-component> {{ component.input }} {{ component.func() }}

通过模板引用变量我们获得了app-component组件的实例引用，这使得我们可以轻松地在模板中访问app-component组件内部的成员。
2. Angular 根据你所声明的变量的位置给模板变量赋值：

• 如果在组件上声明变量，该变量就会引用该组件实例。

• 如果在标准的 HTML 标记上声明变量，该变量就会引用该元素。