在 Angular 中，组件是构建 web 应用程序的基本单元。Angular 组件由 HTML 模板、样式和 TypeScript 代码组成，它们可以接受输入并输出数据。Angular 组件也可以包含子组件，这些子组件可以通过 ContentChild 和 ContentChildren 装饰器进行访问。
ContentChild
ContentChild 装饰器用于获取一个组件或指令的第一个匹配项。这个匹配项可以是一个组件、指令或 HTML 元素。我们可以使用 ContentChild 装饰器来获取子组件或指令的实例，并在父组件中使用它们。
下面是一个简单的示例，演示了如何在父组件中获取子组件的实例：
------ - ---------- ------------ - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----
---------- --------------
-------------------------
------
-
--
------ ----- --------------- -
----------------------------- --------------- ---------------
-------------------- -
---------------------------------
-
-在上面的示例中，我们在父组件中使用 ContentChild 装饰器来获取子组件 ChildComponent 的实例。然后我们在 ngAfterContentInit 生命周期钩子中访问这个实例，并将它打印到控制台上。
ContentChildren
ContentChildren 装饰器用于获取一个组件或指令的所有匹配项。这些匹配项可以是组件、指令或 HTML 元素的列表。我们可以使用 ContentChildren 装饰器来获取子组件或指令的列表，并在父组件中使用它们。
下面是一个简单的示例，演示了如何在父组件中获取子组件的列表：
------ - ---------- ---------------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----
---------- --------------
-------------------------
------
-
--
------ ----- --------------- -
-------------------------------- ---------------- --------------------------
-------------------- -
----------------------------------
-
-在上面的示例中，我们在父组件中使用 ContentChildren 装饰器来获取子组件 ChildComponent 的列表。然后我们在 ngAfterContentInit 生命周期钩子中访问这个列表，并将它打印到控制台上。
总结
在 Angular 中，ContentChild 和 ContentChildren 装饰器可以帮助我们获取子组件或指令的实例或列表。通过使用这些装饰器，我们可以在父组件中访问子组件或指令，并在应用程序中实现更复杂的功能。
以上就是 Angular 组件之 ContentChild & ContentChildren 的相关内容，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d1684eadd4f0e0ffa19ff0