一.什么是内容投影
官方解释:内容投影是一种模式,你可以在其中插入或投影要在另一个组件中使用的内容。例如,你可能有一个 Card 组件,它可以接受另一个组件提供的内容。
用人话说就是:内容投影是组件间嵌套原生HTML标签的一种方式。
父组件中嵌套子组件(HTML),自不必多说,原本就是支持的;而子组件中嵌套父组件的HTML,是内容投影的主要应用场景。
那么如何使用它呢?
二.内容投影分类和使用
1.单插槽内容投影
父组件模板:
<app-singleprojection>
<h3>singleprojection works!</h3>
</app-singleprojection>
子组件模板:
<ng-content></ng-content>
父组件模板的 <app-singleprojection> 标签中的内容,将以HTML在子组件中渲染:
2.多插槽内容投影
一个组件可以具有多个插槽。每个插槽可以指定一个 CSS 选择器,该选择器会决定将哪些内容放入该插槽。
使用此模式,必须指定希望投影内容出现的位置。使用 <ng-content> 的 select 属性来指定位置。
父组件模板:
<app-multiprojection>
<h1 title>multiprojection works!</h1>
<h4 content>multiprojection works!</h4>
</app-multiprojection>
子组件模板:
<div class="test-child">
<p>标题</p><br>
<ng-content select="[title]"></ng-content>
</div>
<div class="test-child">
<p>内容</p><br>
<ng-content select="[content]"></ng-content>
</div>
select 选择器有四种选择方式:
a).select="***"投影父组件中的 *** 标签或者组件内容
b).select=".***":投影父组件里class为 *** 的标签或者组件内容
c).select="[key=value]":选择设置了属性的key值为"value"的html标签或者组件,上例中即为此方式
d).ngProjectAs别名方式:在父组件中需要投影的标签上,通过 ngProjectAs 属性值设置标签别名为***,子组件中设置select="***",子组件将投影父组件中的 *** 标签或者组件内容
父组件模板:
<app-projectas>
<div ngProjectAs="title">
<h1>multiprojection works!</h1>
<h4>multiprojection works!</h4>
</div>
</app-projectas>
子组件模板:
<div class="test-child">
<p>标题</p><br>
<ng-content select="title"></ng-content>
</div>
注意:select的值不能设置为动态的