在 Angular 中，可以通过 ViewChild 来获取子组件的 DOM 元素，然后对其进行操作或访问，这在前端开发中是非常常见的需求。本文将详细介绍如何在 Angular 11 中使用 ViewChild 来获取子组件的 DOM 元素，并给出相应的示例代码。
ViewChild 简介
ViewChild 是 Angular 中的一个重要概念，它是 Angular 提供的一种用于访问组件及其子组件的 DOM 元素的方法。通俗来讲，就是在父组件类中通过 ViewChild 获取到子组件的实例，然后通过该实例中的指定属性来获取子组件的 DOM 元素。
获取子组件的 DOM 元素
首先，在要获取子组件的父组件类中使用 @ViewChild 装饰器来声明一个成员变量并指定其类型为相应的子组件类。可以这样写：
-- -------------------- ---- ------- ------ - ---------- --------- - ---- ---------------- ------ - -------------- - ---- -------------------------- ------------ --------- ------------- ------------ -------------------------- ---------- -------------------------- -- ------ ----- --------------- - -------------------------- --------------- --------------- -
在上述示例中，我们使用 @ViewChild 装饰器声明了一个名为 childComponent 的成员变量，并指定其类型为 ChildComponent。这样在父组件中就可以通过访问 childComponent 中的指定属性来获取子组件的 DOM 元素。
注意：这里的 ChildComponent 是示例中的一个自定义组件类，并不是 Angular 内置的组件。
接下来，在子组件的类中，我们需要使用 @ViewChild 装饰器来声明组件的 DOM 元素。可以这样写：
-- -------------------- ---- -------
------ - ---------- ------- ----------- --------- - ---- ----------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
-------------------------- ------------- -----------
---------- -
---------------------------------------------
-
-在上述示例中，我们使用了 @ViewChild 装饰器来声明了一个名为 childElement 的成员变量，并指定其类型为 ElementRef。同时，我们在子组件的 ngOnInit 方法中访问了该成员变量中的 nativeElement 属性，从而获取了该子组件的 DOM 元素。
注意：这里的 'childElement' 是获取元素的选择器，可以是任何有效的 CSS 选择器。
示例代码
下面是一个完整的代码示例，以便更好地理解 ViewChild 的使用和作用：
-- -------------------- ---- -------
-- ------------------
------ - ---------- ------- ----------- --------- - ---- ----------------
------------
--------- ------------
--------- -
-- -------------------- --- ------
--
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
-------------------------- ------------- -----------
---------- -
---------------------------------------------
-
--- -------------------- ---- -------
-- -------------------
------ - ---------- --------- - ---- ----------------
------ - -------------- - ---- --------------------------
------------
--------- -------------
--------- -
------------
-----------------------
--
---------- --------------------------
--
------ ----- --------------- -
-------------------------- --------------- ---------------
----------------- -
------------------------------------------------------------
-
-在上述示例中，我们声明了一个父组件类 ParentComponent，并在其中使用 @ViewChild 装饰器来获取子组件 ChildComponent 的实例。同时，我们在子组件类 ChildComponent 中使用 @ViewChild 装饰器来获取子组件的 DOM 元素。在父组件类 ParentComponent 中，在 ngAfterViewInit 生命周期钩子函数中访问了子组件 class="highlight">ChildComponent 中的 childElement 成员变量，并输出了该元素的 nativeElement。
结论
ViewChild 是 Angular 中用于访问组件及其子组件的 DOM 元素的重要概念。本文详细介绍了在 Angular 11 中使用 ViewChild 获取子组件的 DOM 元素的相关知识，并提供了示例代码。希望本文对你在前端开发中使用 ViewChild 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ff1cafbd23cf8907113a1