1 准备工作
1.1 搭建angular环境
技巧01：本博文基于angular5
1.3 创建一个angular项目
技巧01：根据业务划分模块，每个模块都设定一个主组件
技巧02：利用路由实现模块的懒加载
2 投影的应用场景
2.1 需求
父组件如何动态的向子组件进行传值操作
2.2 解决
》利用输入属性实现：子组件定义一个输入属性，父组件在使用子组件时就可以通过子组件的输入属性来向子组件传值
》利用路由传参实现：子组件作为父组件的一个子路由对应的组件，父组件通过路由参数向子组件传递数据
》利用服务实现：把服务看做是两个组件之间的桥梁，从而实现传参操作
》投影实现：父组件在使用子组件的时候将需要传给子组件的数据作为子组件元素的内容卸载子组件标签里面即可
2.3 投影的优点
》进行动态传值，可以将一个复杂的组件作为内容投影到子组件中
》解决自定义组件嵌套问题【没有投影功能的自定义组件不能进行嵌套操作】
2.4 投影的应用场景
》自定义组件标签的嵌套使用
》利用自定义组件标签包装原生的HTML标签
3 编程步骤
3.0 ng-content 和 ng-container 的妙用
3.0.1 ng-content
ng-content 通常在投影中使用：当父组件需要向子组件投影数据时必须指定将数据投影到子组件的哪个位置，这时候就可以利用ng-content标签来做一个占位符。
3.0.1 ng-container
ng-container 通常在结构性指令中使用：当需要在一个组件运用两条结构性指令时是会报错的，这时就可以利用ng-container标签对原组件做一层封装，再在ng-container标签上使用第一条结构性指令，在原组件标签上使用第二条结构性指令，；例如：
在一个标签中使用两条结构性指令时的错误信息如下：
解决办法
3.1 投影一块内容
3.1.1 需求
在使用bootstrap3提供的panel组件时很麻烦，每次都需要写4个div而且还要给各个div设定不同的样式；如何利用一个自定义组件对其进行一次封装
3.1.2 bootstrap3的panel组件原装使用
3.1.2 解决办法
》创建自定义组件app-panel，组件的视图中利用 ng-content 进行站位处理
技巧01：ng-content元素的select属性的作用是避免投影错误用的
<div class="panel panel-primary"> <div class="panel-heading"> <span>自定义panel组件</span> </div> <div class="panel-body"> <ng-content select=".body"></ng-content> </div> <div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div> </div>