在 Angular 中，我们经常需要获取 DOM 元素的引用来进行操作，比如修改样式、添加事件监听器等。在这种情况下，@ViewChild 是一个非常有用的工具。本文将介绍在 Angular 中如何使用 @ViewChild 来获取 DOM 元素的引用，并提供一些示例代码来帮助您更好地理解。
@ViewChild 的基本用法
@ViewChild 是 Angular 中一个非常有用的装饰器，它可以让我们获取到 DOM 元素的引用。它的基本用法如下：
------ - ---------- ---------- ---------- - ---- ----------------
------------
--------- -----------
--------- ----- ------------ -------------
--
------ ----- ------------ -
------------------- ------ -----------
----------------- -
------------------------------------------------
-
-在上面的代码中，我们定义了一个名为 myDiv 的模板变量，并将其传递给了 @ViewChild 装饰器。在 ngAfterViewInit 生命周期钩子函数中，我们可以通过 this.myDiv.nativeElement 来访问到这个 DOM 元素的引用。
需要注意的是，@ViewChild 只能获取到第一个匹配的元素。如果我们需要获取多个元素的引用，可以使用 @ViewChildren 装饰器。
@ViewChild 的进阶用法
除了基本用法外，@ViewChild 还有一些进阶用法，可以让我们更加灵活地获取 DOM 元素的引用。
获取组件内的子组件
有时候，我们需要在一个组件中获取到它的子组件的引用。这个时候，我们可以使用 @ViewChild 来实现。
------ - ---------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -------------------------
--
------ ----- --------------- -
-------------------------- --------------- ---------------
----------------- -
---------------------------------
-
-在上面的代码中，我们定义了一个名为 childComponent 的属性，并将其传递给了 @ViewChild 装饰器。由于 ChildComponent 是 ParentComponent 的子组件，因此 @ViewChild 会自动找到它，并将其引用赋值给 childComponent。
获取 ng-template 中的元素
有时候，我们需要在 ng-template 中获取到某个元素的引用。这个时候，我们可以使用 @ViewChild 来实现。
------ - ---------- ---------- ----------- - ---- ----------------
------------
--------- -----------
--------- -
------------ ------------
---- ------------ ------------
--------------
-
--
------ ----- ------------ -
------------------------ ----------- -----------------
------------------- ------ -----------
----------------- -
----- ------- - -----------------------------------------
--------------------------------------------------------------------
-
-在上面的代码中，我们定义了一个名为 myTemplate 的 ng-template，并在其中定义了一个名为 myDiv 的 div 元素。在 ngAfterViewInit 生命周期钩子函数中，我们通过 this.myTemplate.createEmbeddedView(null) 来创建一个嵌入式视图，并通过 viewRef.rootNodes[0].querySelector('#myDiv') 来获取到嵌入式视图中的 myDiv 元素的引用。
示例代码
下面是一个完整的示例代码，它演示了如何使用 @ViewChild 来获取 DOM 元素的引用。
------ - ---------- ---------- ---------- - ---- ----------------
------------
--------- -----------
--------- -
---- ------------ ------------
------- ------------------------- -----------
-
--
------ ----- ------------ -
------------------- ------ -----------
--------- -
---------------------------------- - ------ ----------
-
-在上面的代码中，我们定义了一个名为 myDiv 的 div 元素，并在按钮的 click 事件中修改了它的文本内容。通过使用 @ViewChild，我们可以获取到这个 div 元素的引用，并对它进行操作。
总结
@ViewChild 是一个非常有用的装饰器，它可以让我们获取到 DOM 元素的引用。除了基本用法外，@ViewChild 还有一些进阶用法，可以让我们更加灵活地获取 DOM 元素的引用。在实际开发中，我们可以根据需要选择不同的用法来获取 DOM 元素的引用，以便更好地实现我们的需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66385604d3423812e465b596