在 Angular 中，常常需要将一个组件封装成另一个组件的一部分，这就需要用到内容投影。使用内容投影可以将任意的内容插入到组件的模板中，无需预定义。
在很多情况下，尤其是在封装 UI 组件的时候，需要获取渲染在组件模板中的投影内容的引用，以便进行其他操作。Angular 提供了 @ContentChild 装饰器来解决这个问题。
@ContentChild 装饰器是什么
@ContentChild 装饰器是 Angular 提供的一个用于获取内容投影的引用的装饰器。通过在组件类中声明并在自定义组件中使用 @ContentChild，可以获取组件投影的引用。
使用 @ContentChild 装饰器可以在子组件中获取父组件传递的内容投影的引用，然后可以在子组件中操作它，并匹配它的外观。
如何使用 @ContentChild 装饰器
要使用 @ContentChild 装饰器，首先需要在组件类中导入 ContentChild。
import { Component, ContentChild } from '@angular/core';然后，在组件类中声明一个变量，并用 @ContentChild 装饰器装饰它。
@ContentChild('myContent') myContent: ElementRef;这里，@ContentChild 装饰器的参数是要获取的内容的选择器，可以是组件、指令、DOM 元素等。选择器可以是字符串、类型、标记，也可以是由这些组合而成的数组。
下面是一个示例代码，演示如何使用 @ContentChild 装饰器获取内容投影的引用。我们在父组件中声明了一个子组件，用 @ContentChild 装饰器获取子组件中的 content，随后调用了一个函数实现了输入内容下划线的效果。
-- -------------------- ---- -------
------ - ---------- ------------- ---------- - ---- ----------------
------------
--------- -------------
--------- -
---- ------
-------------------------
------
-----------
-- ------------------------
------------
--
--
------ ----- --------------- -
-------------------------- ---------- -----------
------------- --
-------------------- -
--------------------
-
-------------- -
----- --------- - -----------------------------
---------------------------- - ---- ----- -------
-
-
------------
--------- ------------
--------- -
-------------------------
--
--
------ ----- -------------- -
------------- --
-小结
使用 @ContentChild 装饰器获取内容投影的引用是 Angular 中常见的任务之一。在本文中，我们讨论了如何使用 @ContentChild 装饰器，并给出了一个示例代码，演示了如何在子组件中获取父组件传递的内容投影的引用，并对其进行操作，以实现一些有趣的效果。希望本文能为你在 Angular 中使用 @ContentChild 装饰器提供了一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6781fed6935627c900f2c20b
