浅谈angular2子组件的事件传递(任意组件事件传递)


Posted in Javascript onSeptember 30, 2018

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子组件的事件传递(任意组件事件传递)

以上这篇浅谈angular2子组件的事件传递(任意组件事件传递)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
vue-router 手势滑动触发返回功能
Sep 30 #Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 #Javascript
JS数组实现分类统计实例代码
Sep 30 #Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 #Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 #Javascript
vue使用v-for实现hover点击效果
Sep 29 #Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 #Javascript
You might like
松下Panasonic RF-B65电路分析
2021/03/02 无线电
PHP实现图片简单上传
2006/10/09 PHP
处理单名多值表单的详解
2013/06/08 PHP
php获取操作系统语言代码
2013/11/04 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
教大家制作简单的php日历
2015/11/17 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
vue远程加载sfc组件思路详解
2019/12/25 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python将list转为matrix的方法
2018/12/12 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python openpyxl使用方法详解
2019/07/18 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
个人借款协议书范本
2014/11/17 职场文书
学风建设主题班会
2015/08/17 职场文书