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

组件内容嵌入:

  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>


  1. 使用test组件的组件
// html
<div>
   <app-test>
      <header>我是头部</header>
      <div class="body">我是身体</div>
      <p name="footer">我是脚部</p>
   </app-test>
</div>

效果:

在这里插入图片描述


总结:

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

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐