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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 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转义Json里的特殊字符的函数
2015/06/08 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
Js四则运算函数代码
2012/07/21 Javascript
JS 控件事件小结
2012/10/31 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
详解python之heapq模块及排序操作
2019/04/04 Python
python set内置函数的具体使用
2019/07/02 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python中count函数简单的实例讲解
2020/02/06 Python
如何使用python传入不确定个数参数
2020/02/18 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
司马光教学反思
2014/02/01 职场文书
捐款倡议书范文
2014/02/02 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书