在 Angular 中，组件是构建 web 应用程序的基本单元。组件可以包含其他组件，这些组件被称为子组件。在某些情况下，我们可能需要访问子组件中的内容，这时就需要使用 Angular 提供的 ContentChild 和 ContentChildren。
ContentChild
ContentChild 允许我们访问子组件中的单个元素或组件。在子组件中，我们需要使用 @ContentChild 装饰器来标识要访问的元素或组件，例如：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----
---------- --------------
-------------------------
------
-
--
------ ----- --------------- -
----------------------------- ------ ---------------
-在上面的代码中，我们使用 @ContentChild(ChildComponent) 来标识要访问的 ChildComponent 组件。然后，我们可以在父组件中使用 child 变量来访问子组件中的内容。
ContentChildren
ContentChildren 允许我们访问子组件中的多个元素或组件。在子组件中，我们需要使用 @ContentChildren 装饰器来标识要访问的元素或组件，例如：
-- -------------------- ---- -------
------ - ---------- ---------------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----
---------- --------------
-------------------------
------
-
--
------ ----- --------------- -
-------------------------------- --------- --------------------------
-在上面的代码中，我们使用 @ContentChildren(ChildComponent) 来标识要访问的 ChildComponent 组件。然后，我们可以在父组件中使用 children 变量来访问子组件中的内容。需要注意的是，children 变量是一个 QueryList 类型的对象，它包含了所有符合条件的子组件。
示例代码
下面是一个使用 ContentChild 和 ContentChildren 的示例代码：
-- -------------------- ---- -------
------ - ---------- ------------- ---------------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----
---------- --------------
-------------------------
------- -------------------------- --------------
------- ----------------------------- -----------------
------
-
--
------ ----- --------------- -
----------------------------- ------ ---------------
-------------------------------- --------- --------------------------
----------- -
------------------------
-
-------------- -
-------------------------------------
-
-在上面的代码中，我们定义了一个 ParentComponent 父组件，并使用 @ContentChild 和 @ContentChildren 装饰器来访问子组件中的内容。我们还定义了两个按钮，分别用于显示单个子组件和所有子组件。
结论
ContentChild 和 ContentChildren 是 Angular 中非常有用的工具，它们允许我们访问子组件中的内容。但是需要注意的是，它们只能访问被包含在 ng-content 标签中的内容，而不能访问在组件模板中直接定义的内容。如果你需要访问组件模板中的内容，可以考虑使用 ViewChild 和 ViewChildren。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bd19f78388e33bb2825a7