内容投影

内容投影可以让我们实现在一个组件中插入另一个组件提供的内容。

例如：我们在一个组件app-panel的子元素位置添加了一些内容，这个时候，我们需要把子元素位置的内容显示在组件app-panel当中，这个时候我们就可以使用内容投影。

xxxxxxxxxx
<!-- app.component.html -->
<app-panel>
  <p>body!!</p>
</app-panel>

在需要接收投影内容的组件中使用<ng-content>占位符

xxxxxxxxxx
<!-- 组件模板文件panel-component.html -->
<p>header</p>
<!-- 最终这里的ng-content会被渲染为投影内容： <p>body!!</p> -->
<ng-content></ng-content>

需要使用多个<ng-content>占位符的情况。例如想把投影的内容插入到不同的地方，他们可能有各自的样式。

其中,<ng-content>的select属性接收的值可以是标签名、属性、CSS 类和 :not 伪类的任意组合。如果一组<ng-content>中有<ng-content>没有设置select属性，则该实例将接收所有与其他 <ng-content> 元素都不匹配的投影内容。

xxxxxxxxxx
<!-- app.component.html -->
<app-panel>
    <p head>我是head</p>
    <p body>我是body</p>
</app-panel>

xxxxxxxxxx
<!-- panel-component.html -->
<div class="head">
    <!-- 在这个类名称叫做head的div里面需要插入属性为head的投影内容 -->
    <ng-content select="[head]"></ng-content>
</div>
<div class="body">
    <!-- 在这个类名称叫做body的div里面需要插入属性为body的投影内容 -->
    <ng-content select="[body]"></ng-content>
</div>

如果最终不想渲染出<p>标签，只想要其中的内容，可以使用<ng-container>来替代<p>

xxxxxxxxxx
<!-- app.component.html -->
<app-panel>
    <ng-container head >我是head</ng-container>
    <ng-container body>我是body</ng-container>
</app-panel>

实时效果反馈

1.下列描述错误的是：

A 使用<ng-content>来获取投影内容

B <ng-content>只是一个占位符

C <ng-content>必须设置select属性

D <ng-container>最终不会被渲染为一个DOM

答案

1=>C