插槽

基本概念

在 Angular 中，插槽主要用于创建可复用的组件。
实际工作中，我们经常会将使用频率较高的内容提取出来，作为一个单独的组件，但这样并不能完全满足一些工作需求，比如我们有时需要向这个公用的组件添加不同的内容，这时，就引入了插槽的概念。
可以将插槽理解为，在子组件的模板中提供了占位符 <ng-content>，父组件在引用子组件的时候，可以向这个占位符里填充任何内容。

单一插槽

在子组件中，定义一个 <ng-content> 插槽，在父组件中填充的全部内容，默认都会加入到这个插槽中。

例子：

// 在子组件中定义插槽模板
// content-slot.component.html

<section>
  <ng-content></ng-content>
</section>


// 在父组件中使用子组件
// app.component.html

<section>

  <app-content-slot>
    <p>hello Tom</p>
    <p>welcome to China</p>
  </app-content-slot>

</section>

具名插槽

在子组件的 <ng-content> 元素上，添加 select 属性为插槽命名。
父组件在填充内容时，会根据名字，将内容填充到对应的插槽中。
子组件可以同时创建多个具名插槽。

例子：

// 在子组件中定义插槽模板
// content-slot.component.html

<section>
  <div>
    <ng-content select="[name]"></ng-content>
    <ng-content select="[hope]"></ng-content>

    <!-- 未具名的插槽 -->
    <ng-content></ng-content>
  </div>
</section>


// 在父组件中使用子组件
// app.component.html

<section>

  <app-content-slot>
    <p name>hello Tom</p>
    <p hope>I hope you are well</p>

    <!-- 未指定插槽的填充内容 -->
    <p>welcome to China</p>
    <p>see you</p>
  </app-content-slot>

</section>

例子中，我们发现，子组件定义的第三个插槽没有 select 属性，那么，父组件会把未指定插槽的填充内容全部填充到这个没有具名的插槽中。

---

end