浅谈angular2子组件的事件传递(任意组件事件传递)
更新时间：2018年09月30日 08:45:54 作者：FreeMing-imduingui0
今天小编就为大家分享一篇浅谈angular2子组件的事件传递(任意组件事件传递)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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结构。
简单示意
以上这篇浅谈angular2子组件的事件传递(任意组件事件传递)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
AngularJS使用拦截器实现的loading功能完整实例
这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下2017-05-05
Angular 的 Change Detection机制实现详解
这篇文章主要为大家介绍了Angular 的 Change Detection机制实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
本篇文章主要介绍了详解AngularJS1.6版本中ui-router路由中/#!/的解决方法，非常具有实用价值，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了angularjs中ng-bind-html的用法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本文主要介绍AngularJS指令,这里整理了简单的指令并附示例代码，有需要的小伙伴可以参考下2016-08-08
AngularJs IE Compatibility 兼容老版本IE
本文主要介绍AngularJs IE Compatibility 兼容老版本IE的问题及解决办法，有兴趣的小伙伴可以参考下2016-09-09
AngularJS入门心得之directive和controller通信过程
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件，接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程，对angularjs相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat这四个指令的讲解,需要的朋友可以参考下2015-06-06
本文给大家总结了一些angularjs的基础知识及相关示例，分享给大家，希望能对大家有所帮助。2015-01-01
这篇文章主要介绍了Angular2.0实现modal对话框的方法,结合实例形式分析了angular2.0实现modal对话框的样式、界面及功能等相关操作技巧,需要的朋友可以参考下2018-02-02
最新评论