什么是插槽？
在 Angular 中，插槽（slot）是一种允许将组件的内容作为参数传递给其子组件的机制。通俗的讲，就是将其它组件或 HTML 片段插入到组件的某个位置上。
插槽主要是为了解决组件在不同情况下需要改变自身的样式或内容的需求，它能够允许组件提供一组插槽，让它的父组件填充内容。
使用 ng-content 实现插槽
在 Angular 中，我们可以通过使用 ng-content 指令来实现插槽的功能。ng-content 指令类似于一种占位符，允许组件将内容插入到它所在的位置。
假设我们有一个组件 <app-component>，并且希望在它的某个位置上插入其它组件或 HTML 片段，我们可以这样写：
<app-component> <div>我是插入的 HTML 片段</div> <ng-content></ng-content> </app-component>
在上面的示例中，我们在 <app-component> 组件内部使用了 <ng-content> 指令，这个指令的作用是：将父组件（上例中是 <app-component>）传递进来的内容放到 <ng-content> 的位置上。
因此，当 <app-component> 组件被渲染时，父组件传递进来的所有内容（包括 <div>我是插入的 HTML 片段</div>）都会被放置在 <ng-content> 的位置上。
使用多个插槽
如果我们希望在组件中添加多个插槽，可以使用 name 属性来区分它们。例如：
-- -------------------- ---- -------
---------------
------------- -------------------------------------------
------------- ----------------------------------------
------------ ---------
-------------
--------------
------------ ------
---------------
--------------
----------------在上面的示例中，我们定义了两个插槽：heading 和 body。我们使用了 ng-template 指令来实现插槽的内容，并在 <ng-container> 指令中使用了 ngTemplateOutlet 指令来引用插槽内容。
祖先组件填充插槽内容
在前面的示例中，我们是在组件的模板中填充插槽内容的。那么如果我们希望祖先组件来填充插槽内容，该怎么办呢？
在父组件中也需要使用 ng-content 指令，并在它上面使用 select 属性，可以指定插槽的名称或 CSS 选择器。例如：
-- -------------------- ---- -------
---- -------------------- ---
------------------
--- -------------------------
---- ------------
-----------
------
-------------------
---- --------------- ---
---------------
----------- ------------------------------------
----------- ----------------------------------
----------------在上面的示例中，我们定义了两个插槽，它们的名称分别是 header 和 body。然后，我们在祖先组件 <GrandparentComponent> 的模板中填充了具体的内容。
在父组件 <ParentComponent> 中，我们使用了 ng-content 指令，并指定了 [slot=header] 和 [slot=body]，这样可以让祖先组件 <GrandparentComponent> 中的相应插槽内容填充到当前组件的插槽中。
总结
通过本文的介绍，我们了解了在 Angular 中如何使用 ng-content 指令来实现插槽的功能。通过插槽的机制，我们能够灵活地组合各种组件，并且让父组件在运行期间动态地向子组件传递内容。
如果你想要深入理解 Angular 的组件机制，使用插槽，是必不可少的一部分。我们可以通过在模板中使用 ng-content 指令来实现简单的插槽，或者使用 name 属性为插槽命名并定义多个插槽。同时，我们还可以在父组件中填充插槽内容，实现更为复杂的组件交互。
示例代码：https://stackblitz.com/edit/angular-ng-content-slot-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e01fa7f6b2d6eab3b391be