内容:
- 最基本的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出来的事件之后,执行自己的方法:
这样,子层的事件就能被父层接收到了: