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

更新時(shí)間：2018年09月05日 09:27:13 作者：StarDee

這篇文章主要介紹了ng-events類似ionic中Events的angular全局事件,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

介紹

ng-events 在 Angular 2 以上的版本中使用，類似于 ionic 中的 Events?？梢允褂?ng-events 注冊一個(gè)全局事件，然后在需要的時(shí)候觸發(fā)這個(gè)事件。

GitHub地址

快速開始

npm install ng-events --save

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

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

當(dāng)然也可以直接在index.html中引入，不過并不推薦這么做。

注冊事件

•你可以使用 ngEevents.on 注冊一個(gè)全局事件:

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

第一個(gè)參數(shù)是事件的唯一名稱。第二個(gè)參數(shù)是在觸發(fā)指定事件時(shí)調(diào)用的回調(diào)函數(shù)。

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

觸發(fā)事件

使用 ngEvents.trigger 觸發(fā)一個(gè)全局事件:

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

第一個(gè)參數(shù)是事件的唯一名稱. 第二個(gè)是（可選）事件參數(shù)。

你可以添加任意數(shù)量的參數(shù)并在回調(diào)方法中獲取它們。

總結(jié)

以上所述是小編給大家介紹的ng-events類似ionic中Events的angular全局事件，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

淺談angularJs函數(shù)的使用方法(大小寫轉(zhuǎn)換,拷貝,擴(kuò)充對(duì)象)
今天小編就為大家分享一篇淺談angularJs函數(shù)的使用方法(大小寫轉(zhuǎn)換,拷貝,擴(kuò)充對(duì)象)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
用Angular實(shí)時(shí)獲取本地Localstorage數(shù)據(jù),實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果
這篇文章主要介紹了用ANGULAR實(shí)時(shí)獲取本地LOCALSTORAGE數(shù)據(jù),實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)
最近在做AngularJS 項(xiàng)目，這是寫的一個(gè)60秒倒計(jì)時(shí)功能，下面小編給大家介紹AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)，需要的朋友參考下吧
2017-06-06
AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議
　AnglarJS作為一款優(yōu)秀的Web框架，可大大簡化前端開發(fā)的負(fù)擔(dān)。本文給大家介紹AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議，涉及到angularjs性能調(diào)優(yōu)相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
angularjs 緩存的使用詳解
這篇文章主要介紹了angularjs 緩存的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
AngularJS模態(tài)框模板ngDialog的使用詳解
這篇文章主要介紹了AngularJS模態(tài)框模板ngDialog的使用詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例
這篇文章給大家分享了AngularJS循環(huán)實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友可以看看。
2016-09-09
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
angular4實(shí)現(xiàn)帶搜索的下拉框
這篇文章主要為大家詳細(xì)介紹了angular4實(shí)現(xiàn)帶搜索的下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
angular指令筆記ng-options的使用方法
本篇文章主要介紹了angular指令筆記ng-options的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09