ngContent指令

1.最简单的ng-content的使用，分为以下两步：

##1.在子组件中用ng-content标记投影的位置

<div style="border:solid 1px red">
    <!-- 标记投影的位置 -->
    <ng-content></ng-content>  
</div>

##2.在父组件调用子组件的html之间的内容会被投影到子组件声明ng-content的位置上

<app-red-border>
    <!-- 这段html将会放在ng-content 标记处的地方 -->
    <div>这里是红框内的内容</div> 
</app-red-border>

2.复杂情况，在子组件中被投影的位置有多个时，

##1子组件中有多个投影位置

<div style="border:solid 1px red">
    <!-- 标记投影的位置 -->
    <ng-content select=".red"></ng-content>  
</div>
<div style="border:solid 1px green">
        <!-- 标记投影的位置 -->
        <ng-content select=".green"></ng-content>  
</div>

##2，父组件中投影内容的设置：

<app-red-border>
    <!-- 这段html将会放在ng-content 标记处的地方 -->
    <div class="red">这里是红框内的内容</div> 
    <div class="green">这里是红框内的内容</div> 
</app-red-border>