浅谈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 相关文章推荐
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
小程序实现短信登录倒计时
Jul 12 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
js实现聊天对话框
Feb 08 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
JavaScript实现筛选数组
Mar 02 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中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
python3简单实现微信爬虫
2015/04/09 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
python Django的web开发实例(入门)
2019/07/31 Python
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
介绍一下Ruby的特点
2013/01/20 面试题
设计毕业生简历中的自我评价
2013/10/01 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
英语教师个人工作总结
2015/02/09 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
vue动态绑定style样式
2022/04/20 Vue.js