投影，在某些情况下，需要动态改变模板的内容，可以用路由，但路由是一个相对比较麻烦的东西，而我要实现的功能没有那么复杂，，没有什么业务逻辑，也不需要重用。

这个时候可以用投影。可以用ngContent将父组件中任意片段投影到子组件中

1.父组件模板

<div class="wrapper">
  <h2>我是父组件</h2>
  <div>这个是div定义在父组件中</div>
  <app-child>
      <div class="header">这是页头，父组件投影到子组件的,title是{{title}}</div>
    <!--这个会投影到子组件的ng-content中。父组件模板中插值表达式只能绑定父组件的属性-->
      <div class="footer">这是页脚，父组件投影到子组件的</div>
  </app-child>
</div>

<div [innerHTML]="divContent"></div><!--Angular还可以用属性绑定的形式很方便的插入一段HTML。-->

2.子组件模板

<div class="wrapper">
  <h2>我是子组件</h2>
  <div>这个div定义在子组件中</div>
  <ng-content select=".header"></ng-content>
  <div>内容区域</div>
  <ng-content select=".footer"></ng-content>
</div>
<!--
一个组件可以在其模板中声明多个ng-content标签
假设子组件的部分是由三部分组成的，页头，页脚和内容区。页头和页脚由父组件投影进来，内容区自己定义
-->

3. 父组件控制器

  title = "app component"
  divContent = "<div>慕课网</div>";

4.修改父组件及子组件的wrapper颜色

解析：
innerHTML这种方式只能在浏览器中使用，只能绑定当前组件的内容。ngContent是跨平台的，可以在app应用中使用

ngContent可以设置多个投影点，只能绑定父组件中的属性。

动态生成一段HTML，应该优先考虑ngContent这种方式。

本节内容用来将父组件中的片段投影到子组件中去。