我们利用父组件做做一个通用的模板，然后各个子组件嵌套进去，实现自己的功能，比如:我们要做一个提示弹框，确认弹框…就可以利用这个原理，在angular中有个投影的ng-content可以用在子组件中，父组件直接传递模板到子组件中

常用的投影选择有

  • select=”唯一的名称”(自定义属性)
  • select=”.className”(class类名)
  • select=”[name=唯一的名称]”(属性)

案例:

//子组件app-demo02
<!--下面定义投影-->
<ng-content select="header"></ng-content>
<ng-content select=".body"></ng-content>
<ng-content select="[name=footer]"></ng-content>
//父组件
<app-demo02>
  <header>我是头部投影进去的</header>
  <div class="body">我是身体部分投影进来的</div>
  <div name="footer">我是底部投影过来的</div>
</app-demo02>