在 Angular 中，组件可以通过 @ViewChild 装饰器来获取子组件的实例。但是，如果是通过 ng-content 插入的子组件，我们需要使用 @ContentChild 装饰器来获取子组件的实例。
@ContentChild 装饰器用于获取匹配指定选择器的第一个子组件或指令的实例。和 @ViewChild 装饰器类似，@ContentChild 装饰器的参数可以是一个直接类型，也可以是一个查询表达式，通过查询表达式可以选择特定的子组件或指令。
示例代码
这里有一个示例 parent 组件，它包含了一个 child 组件，child 组件通过 ng-content 插入到了 parent 组件的模板中：
-- -------------------- ---- -------
------ - ---------- ------------- ------------- - ---- ----------------
------------
--------- -------------
--------- -
---------- --------------
-------------------------
-
--
------ ----- --------------- ---------- ------------- -
----------------------------- --------------- ---------------
----------------- -
---------------------------------
-
-
------------
--------- ------------
--------- ---------- ---------------
--
------ ----- -------------- --在 parent 组件中使用 @ContentChild 装饰器来获取 child 组件的实例。在 ngAfterViewInit 钩子函数中打印 childComponent 实例，可以看到输出中实际上是 ChildComponent 的实例。
<app-parent> <app-child></app-child> </app-parent>
查询表达式
如果 parent 组件中包含了多个 child 组件，我们可以通过查询表达式来选择特定的 child 组件。查询表达式可以使用子组件或指令的选择器来指定匹配的规则。
例如，如果我们想要选择 child 组件中的一个带有 special 类的元素：
-- -------------------- ---- -------
------ - ---------- ------------- -------------- ---------- - ---- ----------------
------------
--------- -------------
--------- -
---------- --------------
-------------------------
-
--
------ ----- --------------- ---------- ------------- -
------------------------ - ----- ---------- -- --------------- -----------
----------------- -
-----------------------------------------------
-
-
------------
--------- ------------
--------- -
--------- --------------
---- ----------------------- -------------
-
--
------ ----- -------------- --在 parent 组件中使用 @ContentChild 装饰器，并传入一个字符串参数 special，它与 child 组件中 class 为 special 的元素相匹配。通过 { read: ElementRef } 选项可以返回一个 ElementRef 实例，它包含了与查询表达式匹配的 DOM 元素。
总结
@ContentChild 装饰器可以帮助我们在 Angular 中获取通过 ng-content 插入的子组件的实例。我们可以使用它来获取特定的子组件或指令，并对其进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6651bcb8d3423812e4606620