10、内容投影

内容：
- 最基本的ng-content的用法
- 用projection slotstou应多块内容
- 把自定义组件投影进去
- 事件的处理方式

最基本的ng-content的用法

一个最简单的嵌套结构，app.component.html中有一个父组件，然后父组件内部还有一个子组件。

加入子组件中的东西可能不是那么简单，比如标题并不是写死的，也不是绑定在子组件的某个属性中的。它需要从父类组件中投影一些东西进来。这个时候就需要使用到ng-content了。

在子组件中使用标签占位，然后再父组件使用子组件的时候，往子组件中间添加一些其他html标签元素，那么这些添加的html代码就会被投影到子组件的标签占位的地方。

但是，这样最简单的有时候还是不够用，比如我子组件中不止是一个地方不确定，可能有多个地方。那么也是可以这样使用，但是需要使用到select确定每一个ng-content占位的地方需要投影进那些内容：

父组件放入app.component.html文件中：

随后父子组件的ng-content使用方法：

最后实现结果：(大漠老师总是用这么贬低自己的做例子，我表示不同意，大漠老师是个棒棒哒的大牛！！！)

ng-content投影较复杂的一个组件

假如，我需要投影进来的是一个比较复杂的component，而不是简单的一些html标签的话，怎么弄呢？ng-content投影一个组件也是一样可行的，只需要写好对应的select即可。

使用组件，然后子组件中留好ng-content的占位地方（可以使用css选择器做好对应）：

投影组件的事件传输

那么，再如果组件更复杂一些，里面有一些事件需要传递出来的话，那怎么办呢？

首先子组件的组件类ts文件中需要响应事件，然后需要有一个@Output的事件发布emitter：

然后子组件html模板中绑定好响应事件：

再然后父组件使用时，接收emit出来的事件：

最后在接收到emite出来的事件之后，执行自己的方法：

这样，子层的事件就能被父层接收到了：