当我们在编写 Angular 应用程序时，经常需要获取 DOM 元素，以便我们可以对其进行操作。 在 Angular 中，可以使用 ViewChild 来获取 DOM 元素的引用。
什么是 ViewChild？
ViewChild 是一个装饰器，它允许我们获取对模板中元素或指令实例的引用。 从模板获得对 DOM 元素的引用是一个常见的任务，而 ViewChild 十分适合处理这一任务。它将DOM元素的获取转化为类的属性，使得开发者可以很方便的直接操作dom（例如：改变样式，获取内容等等）
如何使用 ViewChild？
- 在组件中使用 ViewChild
在组件中，我们可以通过注入 ElementRef 来获取对模板元素的引用。 使用 ViewChild 来获取模板中的特定元素或指令的引用。 在组件内部，我们可以通过 @ViewChild() 装饰器和指令或组件的类型来获取对它们的引用，如下所示：
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------------
--------- -----------
--------- -
------- --------- ------------------------- ------------
--
--
------ ----- ------------ -
---------------------- --------- -----------
--------- -
------------------------------------- - ----------
-
-在上述示例中，我们定义了一个名为 myButton 的本地引用，然后使用 @ViewChild('myButton') 装饰器来获取对该按钮元素的引用。通过 this.myButton.nativeElement 可以访问原生 DOM 元素。
- 在指令中使用 ViewChild
在指令中，我们可以使用 ViewChild 获取对主宿元素的引用。
-- -------------------- ---- -------
------ - ---------- ----------- ---------- --------- - ---- ----------------
------------
--------- ----------------
--
------ ----- ------------------ -
-------------------------- ------------ ------------------------
------------------- --------- ---------- ------- ----------- ----------- --
---------- -
-----------------
-
----------- -
----------------------------------------------------- ------------------- ----------
-
-在上述示例中，我们定义了一个名为 hostElement 的本地引用，使用 @ViewChild('appHighlight') 装饰器来获取对该宿元素的引用。在指令构造函数中注入了 Renderer2 和 ElementRef，以便我们可以使用原生 DOM API 操作宿元素。
总结
ViewChild 提供了一种方便的方式来获取 DOM 元素的引用，这是在 Angular 应用程序中进行操作的必要步骤。无论您是在组件中还是在指令中使用 ViewChild，它都提供了一种非常简单、可靠的方法来获取对特定元素或指令实例的引用，以便您可以在应用程序中进行操作。
希望本文能够帮助你更好地理解 ViewChild 的用法和使用场景，使 Angular 中 DOM 元素的获取更加便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648820da48841e98946a1e9b