浅谈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 相关文章推荐
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
jquery实现图片预加载
Dec 25 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 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
php重定向的三种方法分享
2012/02/22 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
nginx 设置多个站跨域
2021/03/09 Servers
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
javascript实现input file上传图片预览效果
2015/12/31 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Flask之请求钩子的实现
2018/12/23 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
挖掘机司机岗位职责
2014/02/12 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
政治学求职信
2014/06/03 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
考试作弊检讨书
2014/10/21 职场文书
整改落实自查报告
2014/11/05 职场文书
离婚协议书格式
2015/01/26 职场文书
青岛导游词
2015/02/12 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
Python加密技术之RSA加密解密的实现
2022/04/08 Python