ng-events类似ionic中Events的angular全局事件


Posted in Javascript onSeptember 05, 2018

介绍

ng-events 在 Angular 2 以上的版本中使用,类似于 ionic 中的 Events。可以使用 ng-events 注册一个全局事件,然后在需要的时候触发这个事件。

GitHub地址

快速开始

npm install ng-events --save

在 Angular 6 以上的版本中使用,修改 angular.json 文件, 在Angular 6以下版本中使用,修改.angular-cli.json文件

"scripts": [
       "node_modules/ng-events/dist/ng-events.js"
       // ...
      ]

当然也可以直接在index.html中引入,不过并不推荐这么做。

注册事件

•你可以使用 ngEevents.on 注册一个全局事件:

ngEvents.on('eventName', function (item) {
  console.log(item.name + ' was selected!');
});

第一个参数是事件的唯一名称。 第二个参数是在触发指定事件时调用的回调函数。

•您可以使用 ngEvents.off 方法取消注册的事件。

触发事件

使用 ngEvents.trigger 触发一个全局事件:

ngEvents.trigger('eventName', {
  id: 42,
  name: 'Pencil'
});

第一个参数是事件的唯一名称. 第二个是(可选)事件参数。

 你可以添加任意数量的参数并在回调方法中获取它们。

总结

以上所述是小编给大家介绍的ng-events类似ionic中Events的angular全局事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
JSON取值前判断
Dec 23 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 #Javascript
vue 监听屏幕高度的实例
Sep 05 #Javascript
Vue-Router的使用方法
Sep 05 #Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 #Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 #Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 #Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 #Javascript
You might like
基于php iconv函数的使用详解
2013/06/09 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
JsChart组件使用详解
2018/03/04 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python使用opencv读取图片的实例
2017/08/17 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python中如何导入类示例详解
2019/04/17 Python
python命令 -u参数用法解析
2019/10/24 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Django框架模板用法入门教程
2019/11/04 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
留学推荐信怎么写
2014/01/25 职场文书
《桥》教学反思
2014/04/09 职场文书
网络营销计划书
2015/01/17 职场文书
焦点访谈观后感
2015/06/11 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
python开发实时可视化仪表盘的示例
2021/05/07 Python
V Rising 服务器搭建图文教程
2022/06/16 Servers