首页 > 其他 > 详细

组件之间的事件绑定

时间:2019-04-30 10:14:55      阅读:112      评论:0      收藏:0      [点我收藏+]
#组件之间的事件绑定
应用场景:parent component内嵌了一个child component,child的template 有一个button,点击这个button,把child的数据传递给parent component

数据流向:从child -> parent
用到的知识点:output、EventEmitter(事件发射器)

实现思路:
1.构建child组件的事件绑定
2.构建parent组建的事件绑定
3.parent与child关联

知识点:设计中的观察者模式,Eventemitter是一个实现了观察者模式的对象,他管理一系列的订阅者(subscribe),并向其发布事件的对象。
观察者设计模式:举例来说server返回的数据放在了一个地方,只有去取才能拿到。
举例场景:
报 刊 中 心(分发中心)
| |
订阅者(subscribe),订阅者(subscribe)

只有订阅了,才能得到报刊的信息

有的框架在用到观察者模式时,非常明确,有一个observe center
angular没有oberver ,但是有明确的subscribe
subscribe本身是一个方法,用于订阅变化的信息。

注意事项:
这里所说的Output是指child component的输出
@Input、@Output 都是以child component为参考物
@Input、@Output 都定义在child component中
以我看来,这种模式更像是delegate模式(委托模式)
child 发起一个task,触发了事件,但child不执行这个事件;那么谁来执行这个事件呢?
或者说,委托谁来处理这个事件呢?Angular中,由parent来处理这个事件

特别注意事项:
parent与child的@Output、@Input之间的关系是“固定的”,名称必须一致。
parent中的(output name)的output name 必须是child中所定义的那个@Output、@Input

补充:回调函数中,参数的命名不重要,参数的位置是唯一的
如果一个函数的callback函数,可以简单地命名函数的参数为:(cb),cb callback的缩写


总结:自顶向下的数据流:简单;
而逆向的数据流,有些复杂,必须通过EventEmitter实现。
 
app.component.html
技术分享图片

parent.component.html

技术分享图片

child.component.html

技术分享图片

child.component.ts

技术分享图片

parent.component.ts

技术分享图片

 

 

 

组件之间的事件绑定

原文:https://www.cnblogs.com/aiyamoer/p/10794133.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!