在 Angular 中，组件是构建应用程序的基本单元。组件可以包含其他组件，这些组件可以通过 ViewChild 和 ViewChildren 装饰器来访问。
ViewChild
ViewChild 装饰器用于获取对组件或指令的引用。它可以用来获取一个组件或指令的实例，并访问其公共方法和属性。
下面是一个简单的示例，演示如何使用 ViewChild 获取子组件的引用：
------ - ---------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----------------------
------- ------------------------- -----------
-
--
------ ----- --------------- -
-------------------------- --------------- ---------------
--------- -
-------------------------------
-
-在这个示例中，ParentComponent 包含一个 ChildComponent。@ViewChild 装饰器用于获取对 ChildComponent 的引用，并将其存储在 childComponent 属性中。当用户单击按钮时，onClick 方法将调用 childComponent 的 sayHello 方法。
ViewChildren
ViewChildren 装饰器与 ViewChild 装饰器类似，但可以用于获取多个组件或指令的引用。它返回一个 QueryList 对象，该对象包含所有匹配的组件或指令实例。
下面是一个示例，演示如何使用 ViewChildren 获取多个子组件的引用：
------ - ---------- ------------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
---------- ----------- ---- -- -------------------
------- ------------------------- -----------
-
--
------ ----- --------------- -
----------------------------- ---------------- --------------------------
----- - --- -- ---
--------- -
---------------------------------- -- ------------------
-
-在这个示例中，ParentComponent 包含多个 ChildComponent，使用 *ngFor 指令动态生成。@ViewChildren 装饰器用于获取对所有 ChildComponent 的引用，并将它们存储在 childComponents 属性中。当用户单击按钮时，onClick 方法将遍历 childComponents 数组，并调用每个子组件的 sayHello 方法。
总结
ViewChild 和 ViewChildren 装饰器是 Angular 组件中非常有用的工具，可以让我们轻松地访问子组件和指令。在实际开发中，我们可以使用它们来实现一些复杂的功能，如动态生成组件、组件之间的通信等。
希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d17cd3add4f0e0ffa2a3f2