在 Angular 中，组件是处理和显示视图的基本单元。这个框架被设计成高度可组合的，因此，我们可以通过组合多个小的组件来构建较大复杂的组件。但是，有时候我们会遇到这样的情况，即我们需要在组件中插入动态的内容。这时候，Angular 的 ng-content 指令为我们提供了一个灵活的解决方案。
什么是 ng-content
ng-content 指令是 Angular 中用于呈现动态内容的功能之一。通常，在组件中我们会用 ng-content 指令来内嵌其他组件或者 HTML 片段以呈现动态内容。
具体来说，ng-content 是一个占位符，它允许我们在组件中声明一个或多个插槽，以便我们可以在使用组件时通过这些插槽向组件中插入动态内容。
ng-content 的使用
为了更好的理解 ng-content 的使用方法，让我们看一下下面的示例。
假设我们有一个叫做 InfoPanel 的组件，用于呈现一个信息面板。这个组件想要在面板中呈现的内容是动态的，也就是说，在使用组件时，我们可以向组件中插入不同的内容。
我们可以通过在组件模板中使用 ng-content 指令来实现这一点，示例代码如下：
<div class="info-panel"> <ng-content></ng-content> </div>
在这个示例中，我们声明了一个名为“info-panel”的 CSS 类，用于呈现组件的样式。同时，我们也定义了一个 ng-content 指令，它将充当一个插槽，允许在使用组件时插入动态内容。
现在，我们可以使用这个组件，并向插槽中插入需要的内容。示例如下：
<app-info-panel> <h1>Hello World</h1> <p>This is a test.</p> </app-info-panel>
在这个示例中，我们在 InfoPanel 组件中插入了两个 HTML 元素：一个 h1 标题和一个段落。这些元素将被动态地渲染在组件模板中 ng-content 指令所在的位置。
这样，我们就实现了一个灵活的 InfoPanel 组件，允许向其中插入任意的内容，从而扩展了组件的灵活性和可重用性。
ng-content 的高级用法
上面的示例展示了如何使用 ng-content 在组件中插入动态的 HTML。但是实际上，这只是 ng-content 能够实现的众多用途之一。下面，我们将看一些更高级的用法。
多个插槽
我们可以在同一个组件中使用多个插槽，来增加组件的灵活度。在组件模板中，我们可以声明多个插槽，并分别指定它们的名称，在使用组件时，可以通过这些名称插入不同的内容。示例如下：
-- -------------------- ---- ------- ---- ------------------- ---- -------------- ----------- ----------------------------------- ------ ---- ------------- ----------- ---------------------------------- ------ ------展开代码
在这个示例中，我们在 InfoPanel 组件中使用了两个插槽：一个用于显示标题，一个用于显示正文。同时，我们还定义了两个类名，用于呈现组件的样式。
我们可以在使用组件时，通过指定 select 来选择需要插入到哪个插槽中，示例如下：
<app-info-panel> <h1 class="panel-title">Hello World</h1> <p class="panel-body">This is a test.</p> </app-info-panel>
在这个示例中，我们向组件的 title 插槽中插入了一个 h1 元素，向正文插槽中插入了一个段落。这两个元素将被动态地渲染在组件模板中 ng-content 指令所在的位置。
ng-content 的动态加载
有时候，我们希望在某些条件满足时才加载组件中的某些内容，而不是一开始就一股脑地加载所有内容。这时，我们可以通过 ng-content 的动态加载功能来实现这一点。
具体来说，我们可以使用 *ngIf 指令来判断某个条件是否满足，如果满足则动态地加载相关的 ng-content。
示例如下：
-- -------------------- ---- ------- ---- ------------------- ---- -------------- ----------- ----------------- ----------------------------------- ------ ---- ------------- ----------- ---------------- ---------------------------------- ------ ------展开代码
在这个示例中，我们在组件中使用 *ngIf 指令，来根据组件的状态动态地加载 title 和 body 插槽中的内容。
contentChild 和 contentChildren
除了直接在组件模板中使用 ng-content，我们还可以通过 contentChild 和 contentChildren 来操作组件中的 ng-content。
具体来说，我们可以使用 contentChild 和 contentChildren 来查找组件中指定名称的 ng-content，然后进行一些操作。例如，我们可以获取某个插槽中的元素，或者获取组件中所有的 ng-content。
示例如下：
-- -------------------- ---- ------- ------ ----- ------------------ ---------- ---------------- - ---------------------- ------------- ----------- ------------------------ ------------- ---------------------- -------------------- - ------------------------------------------------------- --------------------------------------------- -- ---------------------------- - -展开代码
在这个示例中，我们定义了一个 InfoPanelComponent 组件，并使用了 @ContentChild 和 @ContentChildren 来获取组件中名为 title 和 body 的 ng-content。在 ngAfterContentInit 这个组件生命周期钩子中，我们使用 ElementRef 和 QueryList 来获取这两个插槽中的元素，然后打印它们的 innerHTML。
结语
到这里，我们就介绍了 Angular 中 ng-content 的妙用。ng-content 提供了一种灵活的方式来向组件中插入动态内容，从而扩展了组件的灵活性和可重用性。同时，我们还探讨了 ng-content 的高级用法，包括多个插槽、ng-content 的动态加载以及 contentChild 和 contentChildren 等。
通过掌握 ng-content 的使用和扩展方法，我们可以更加高效地构建 Angular 应用，并提高应用的质量和可重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b71e36306f20b3a63c856e
