在 Angular 中，Template 是一个非常重要的概念，它用来描述组件的视图。当我们需要在 Template 中给某个元素赋值、绑定事件等操作时，就需要用到 Template 引用变量。接下来，我们将详细介绍 Angular 中的 Template 引用变量。
什么是 Template 引用变量
Template 引用变量是指在 HTML 模板中使用 # 符号来定义的，用来引用 DOM 元素或组件。它可以用来给元素赋值、绑定事件、获取元素的值等操作。
例如，我们可以使用以下代码定义一个 Template 引用变量：
<input type="text" #myInput> <button (click)="setValue(myInput.value)">设置值</button>
该代码定义了一个名为 myInput 的 Template 引用变量，它引用了一个输入框元素。当按钮被点击时，调用 setValue 方法来设置输入框的值。
如何使用 Template 引用变量
Template 引用变量可以在组件类中使用 @ViewChild 或 @ViewChildren 装饰器来访问。@ViewChild 用于获取单个实例，而@ViewChildren 用于获取多个实例。
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------------
--------- -----------
--------- -
------ ----------- ---------
------- ----------------------------------------------
-
--
------ ----- ------------ -
--------------------- --------
--------------- -
-------------------------------- - ------
-
-该代码中，@ViewChild 装饰器被用来获取 Template 引用变量 myInput，在 setValue 方法中，我们可以通过 this.myInput.nativeElement 来访问该元素的值。
如何访问组件中的 Template 引用变量
有时候，我们需要访问组件中的 Template 引用变量。这时，我们可以使用 @ViewChild 装饰器和组件的类型来访问。
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------------
--------- ------------
--------- -
------ ----------- ---------
------- ----------------------------------------------
-
--
------ ----- -------------- -
--------------- -
-------------------
-
-
------------
--------- -----------
--------- -
---------- -------------------
-
--
------ ----- ------------ -
------------------- - ------- ----- -- ------ ---------------
----------------- -
------------------------
-
-该代码中，我们创建了一个名为 ChildComponent 的组件，其中包含了一个名为 myInput 的 Template 引用变量。在 AppComponent 中，我们使用@ViewChild 装饰器和组件的类型 ChildComponent 来访问 ChildComponent 中的 Template 引用变量。在 AppComponent 的 ngAfterViewInit 方法中，我们可以通过 this.child 来访问 ChildComponent 的实例，从而获取该组件中的 Template 引用变量。
总结
在 Angular 中，Template 引用变量是非常实用的一种技术，可以用来引用 DOM 元素和组件，以进行赋值、事件绑定和获取元素的值等操作。我们可以使用 @ViewChild 和 @ViewChildren 装饰器来访问 Template 引用变量。同时，我们还可以在子组件中使用 Template 引用变量，并在父组件中通过组件类型来访问子组件中的 Template 引用变量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653226637d4982a6eb46965b