angular知识点--组件内容嵌入

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

组件内容嵌入：

1. 通常用来创建可复用的组件，例：对话框、导航栏。
2. 可以同时使用多个嵌入内容
3. 类型：标签选择器、类选择器、属性选择器

逻辑：

1. 定义一个test组件，指定多个内容嵌入，让里面的内容可动态变化

代码：

1. test 组件

// html

<div>
  <h4>ng-content 示例</h4>
  <div style="background-color:gray;margin:5px;padding:5px;">
    <ng-content select="header"></ng-content>
  </div>
  <div style="background-color:pink;margin:5px;padding:5px;">
    <ng-content select=".body"></ng-content>
  </div>
  <div style="background-color:greenyellow;margin:5px;padding:5px;">
    <ng-content select="[name=footer]"></ng-content>
  </div>
</div>

---

2. 使用test组件的组件

// html
<div>
   <app-test>
      <header>我是头部</header>
      <div class="body">我是身体</div>
      <p name="footer">我是脚部</p>
   </app-test>
</div>

效果：

---

总结：

可以观察一下最后渲染出来的html结构