组件插槽 - Angular官网上叫内容投影，Vue也有一样的功能实现——插槽slot。他俩是同一种概念，目的是用来创建更加灵活的且可复用组件。

内容投影是一种模式，你可以在其中插入或投影要在另一个组件中使用的内容。

在 Angular 中内容投影的常见包括：

• 单插槽内容投影。使用这种类型的内容投影，组件可以从单一来源接受内容。
• 多插槽内容投影。在这种情况下，组件可以从多个来源接受内容。
• 有条件的内容投影。使用条件内容投影的组件仅在满足特定条件时才渲染内容。
  （其中， 有条件的内容投影这里暂不做介绍，大家感兴趣可以去官网学习。）

单插槽内容投影

功能：创建一个组件，你可以在其中投影一个组件。

在单插槽和多插槽的内容投影中，我们需要借助ng-content元素来实现投影。

<ng-content> 元素是一个占位符，它不会创建真正的 DOM 元素。

示例：

1.在子组件child.component.html内添加一个插槽。

<div style="background: yellowgreen;width: 100%;height: 90px">
  <h3>子组件区域</h3>
  <ng-content></ng-content>
</div>

2.在父组件home中引入子组件child，并在home.page.html内添加引入app-child，再设置投影内容。

<div style="background: pink;width: 100%;height: 100%;">
  <h1>父组件区域</h1>
  <app-child>
    <p>我是child组件的单插槽投影内容</p>
  </app-child>
</div>

3.效果图。

多插槽内容投影

一个组件可以拥有多个插槽，多插槽内容投影模式下，每个插槽可以设置一个css选择器，由选择器决定哪些内容对应到该插槽。

通过使用 <ng-content> 的 select 属性来完成此任务。

示例：

还是上面那个例子改一下。
1.在子组件child.component.html内添加3个插槽，其中包含一个默认插槽。

<div style="background: yellowgreen;width: 100%;padding: 10px 3px;">
  <h3>子组件区域</h3>
  <!-- 插槽一 -->
  <ng-content select="[slot1]"></ng-content>
  <div style="width: 300px;background: #fff;padding: 10px 3px;">
    <!-- 插槽二 -->
    <ng-content select="[slot2]"></ng-content>
  </div>
  <!-- 默认插槽 -->
  <ng-content></ng-content>
</div>

2.在父组件home中引入子组件child，并在home.page.html内添加引入app-child，再设置投影内容。

<div style="background: pink;width: 100%;height: 100%;">
  <h1>父组件区域</h1>
  <app-child>
    <p slot1>我是插槽1投影内容</p>
    <p slot2 style="color: red;">我是插槽2投影内容</p>
    <p>我是默认插槽投影内容</p>
  </app-child>
</div>

3.效果图。

使用 slot1 属性的内容将投影到带有 select=[slot1] 属性的 <ng-content> 元素。

如果你的组件包含不带 select 属性的 <ng-content> 元素，
在这里插入代码片则该实例将接收所有与其他 <ng-content> 元素都不匹配的投影组件。
如上述例子中的默认插槽。