angular2子组件的事件传递(任意组件事件传递)
来源:互联网 发布:宁波畅想软件 编辑:程序博客网 时间:2024/05/22 19:54
angular2子组件的事件传递
angular2有很多组件组成,画面由很多路由,导致事件的传递很“笨拙”,本组的技术负责人发现了任意组件传递事件的这个方法,教会了我,我做个笔记。
项目情况:
画面结构复杂,路由数目偏多,组件数目多,嵌套复杂。业务要求:任何出现人名的地方,点击人名,直接打开和这个人的聊天画面
以前用angular2官网给的烹饪技巧基本解决90%的需求,当然这个如果是用Input,Output也可以,但是那样的话,结构将是混沌状态。
附:angluar2的组件通讯的传送门(anglar2的官网对Safari支持可不太好,真爱生命,请用chrome)
实现
service:
这是重点,相当于一个事件队列,所有注入此service的组件,都可以发起事件,插入到队列中,所有订阅此事件队列的组件都会收到广播。(暂时先用广播这个词吧)
public eventbus: EventEmitter<any> = new EventEmitter<any>();
聊天组件:
constructor( private _workservice:WorkService) { // 订阅聊天事件 this._workservice.eventbus.subscribe(_event => { if (_event&&_event.name=='chart') { // 所有订阅这个事件的组件都会收到eventbus上的事件触发,相当于广播。 // 所以使用在事件传递的参数中添加一个name变量来判断这个事件是不是给我的。 // ......... // 此处写处理就行了,通过_event取参数 // ......... } } ) }
发起聊天的组件:
this.workService.eventbus.emit({ type:3, voipAccount:userid });// 注意emit()的参数是json结构。
简单示意
0 0
- angular2子组件的事件传递(任意组件事件传递)
- vue子组件的使用和事件传递
- angular2父子组件的数据传递,父组件向子组件传递数据
- Vue组件绑定自定义事件(子向父传递事件)
- angular2父子组件的数据传递,子组件向父组件抛出数据
- FLEX实践: 组件传递事件的处理
- Angular2父子组件之间数据传递:@ViewChild获取子组件
- angular2中父子组件的数据传递
- angular2.0父子组件通信---如何通过组件属性将数据传递给子组件
- VUE中子组件向父组件传递事件
- Angular2父子组件之间数据传递:局部变量获取子组件
- 自定义Flex事件,实现组件间传递事件
- angular2 组件之间通过service互相传递
- 如何给组件添加事件并传递参数
- 事件从Activity到布局view再到最终组件的传递过程
- Vue父组件调用子组件事件
- Angular2父子组件之间数据传递:@Input和@Output (上)
- Angular2父子组件之间数据传递:@Input和@Output (下)
- Bioperl在window下的安装
- 高斯消元模板
- 求组合数
- 重写equals和hasCode 方法 JDK1.7
- juery实现ul li标签切换
- angular2子组件的事件传递(任意组件事件传递)
- 实验2 运算器的编程实现
- CSS 的 background 属性
- NetRipper源码
- c语言的变量存储方式
- robots协议
- 算法题--大数据取最大前几个
- 广东省成人高考录取流程
- php开发笔记(七)用数组函数实现生成随机字符串