Angular内容映射(插槽)ng-content用法

  插槽主要用于创建可复用的组件，在工作中，我们有时需要向公用的组件添加不同的内容，这时就引入了插槽的概念。

  可以将插槽理解为，在子组件的模板中提供了占位符<ng-content>,<ng-content>是一个占位符，并不会真正的创建一个DOM元素。父组件在引用子组件时，可以向这个占位符里填充任何内容。

  使用方法

// 在子组件中定义插槽模板
<div class="card">
  // 具名插槽
  <ng-content #title></ng-content>
  <ng-content #content></ng-content>
  // 匿名插槽
  <ng-content></ng-content>
</div>

// 在父组件中使用插槽
<app-card>
  // 使用具名插槽(如需添加样式 在父组件中的css里添加)
  <div title class="title">我是头部</div>
  <div content>我是内容</div>
  // 使用匿名插槽
  <p>我是匿名插槽</p>
</app-card>