在 Angular 应用中，@ViewChild 装饰器是一个非常有用的工具，可以用于获取子组件的引用。在这篇文章中，我们将介绍如何使用 @ViewChild 装饰器以及它的作用以及如何在你的代码中使用它。
@ViewChild 装饰器
在 Angular 中，@ViewChild 装饰器可以用于获取子组件、指令、模板等视图元素的引用。它是一个非常方便的工具，因为它可以让你在父组件中访问子组件的属性和方法，这样就可以实现父子组件之间的通信。
使用 @ViewChild 装饰器
要使用 @ViewChild 装饰器，你需要首先导入 ViewChild，然后在组件中定义一个 ViewChild 属性。这个属性需要指定一个或多个查找器，用于查找需要引用的子组件或元素。
下面是一个简单的例子，演示如何使用 @ViewChild 装饰器来获取子组件的引用。
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
---------- ----------------------------
------- ----------------------------------
-
--
------ ----- --------------- -
---------------------------- --------------- ---------------
--------- -
----------------------------------
-
-在上面的例子中，我们在父组件中定义了一个 ViewChild 属性 childComponent，它使用了一个字符串查找器 #childComponent。这个查找器指定了子组件的位置，并将它的引用保存到 childComponent 属性中。
然后，我们在父组件中定义了一个按钮，并绑定一个 onClick 事件。当用户点击按钮时，我们调用了子组件的 doSomething 方法。
注意，我们在子组件中定义的名字应该与查找器的名字相同，这样才能正确的获取子组件的引用。
@ViewChild 的类型
当你使用 @ViewChild 装饰器时，你需要指定一个类型。这个类型指定了你要获取的元素的类型。比如，如果你要获取一个子组件的引用，那么你需要指定这个子组件的类型。如果你要获取一个 DOM 元素的引用，那么你需要指定这个元素的类型。
下面是一个示例代码，演示如何使用 @ViewChild 装饰器获取一个 DOM 元素的引用。
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------------
--------- -------------
--------- -
---- -------
----- ------
------
-
--
------ ----- --------------- -
------------------- ------ ----------------
----------------- -
------------------------------------------------
-
-在上面的例子中，我们在父组件中定义了一个 DIV 元素，然后使用 #myDiv 查找器将它的引用保存到 ViewChild 属性 myDiv 中。在 ngAfterViewInit 生命周期钩子中，我们使用 myDiv 属性访问这个 DOM 元素并输出它的文本内容。
总结
现在你已经知道了如何使用 @ViewChild 装饰器在 Angular 中获取子组件和 DOM 元素的引用。这个工具非常强大，可以帮助你实现复杂的组件之间的通信和交互。我希望这篇文章对你有帮助，并且可以让你更好的理解和使用 @ViewChild 装饰器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a62e7348841e98942c0cc2