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 相关文章推荐
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
Jquery 效果使用详解
Nov 23 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
详解vue-cli3多页应用改造
Jun 04 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 单引号与双引号的区别
2009/11/24 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python class的继承方法代码实例
2020/02/14 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
魅力教师事迹材料
2014/01/10 职场文书
同事打架检讨书
2014/02/04 职场文书
亚运会口号
2014/06/20 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
青年志愿者活动感想
2015/08/07 职场文书
python实现简单的聊天小程序
2021/07/07 Python
vue项目支付功能代码详解
2022/02/18 Vue.js