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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
Node.js实现断点续传
Jun 23 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 zend解密软件绿色版测试可用
2008/04/14 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
Python切片用法实例教程
2014/09/08 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
对Python _取log的几种方式小结
2019/07/25 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Python如何获取文件指定行的内容
2020/05/27 Python
python 绘制国旗的示例
2020/09/27 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
三八活动策划方案
2014/08/17 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS