在前端开发中，经常需要实现组件之间的通信，为了更加方便地进行事件传递，可以使用 angular-event-service npm 包。这个 npm 包提供了一系列的服务和指令，能够轻松实现组件之间的事件传递，大大提高了开发效率。
安装 angular-event-service
可以通过 npm 来安装 angular-event-service，执行以下命令即可：
npm install angular-event-service
引入 angular-event-service
在应用中引入 angular-event-service 可以使用以下方式：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ -------------- --------------- ---- ------------------------ ----- ---------- - ------ ----- --- - -------------------------- ---- --------------------------- -------------- ---------------------- ----------------
使用 EventService
angular-event-service 提供了以下方法来处理事件：
on(eventName: string, callback: Function)
监听一个事件，当事件被触发时，执行回调函数。
EventService.on('customEvent', (data) => {
console.log(data);
});emit(eventName: string, data?: any)
触发一个事件，同时可以传递事件数据。
EventService.emit('customEvent', {name: 'John', age: 30});removeAllListeners(eventName: string)
移除一个事件的所有监听函数。
EventService.removeAllListeners('customEvent');使用 EventDirective
angular-event-service 还提供了一个指令，使得在页面中可以通过指令来触发事件或者监听事件。
<button event="customEvent" event-data="{name: 'John', age: 30}">触发自定义事件</button>
<div event-listen="customEvent" event-callback="eventCallback"></div>event 指令
使用 event 指令可以将一个 click 事件绑定到指定的元素上，并且可以传递数据。
event-data 属性
使用 event-data 属性可以传递数据到回调函数中。
event-listen 指令
使用 event-listen 指令可以监听指定的事件。
event-callback 属性
使用 event-callback 属性可以指定监听事件的回调函数。
示例应用
以下是一个在两个组件之间共享数据的示例应用：
-- -------------------- ---- -------
------ ------- ---- ----------
------ -------------- --------------- ---- ------------------------
----- ---------- - ------
----- --- - -------------------------- ----
--------------------------- --------------
---------------------- ----------------
----- ------------ -
------------------------- -
----------------- - -------------
---------- - --
----------------------------------- ------ -- -
---------- - -----
---
-
---------- -
-------------
------------------------------------- ------------
-
-
-------------------- -
--------- -
-----
--------- -- ----------- ------
------- ----------------------------------
------
--
----------- ------------
---
----- ---------------- -
------------------------- -
----------------- - -------------
----------------------------------- ------ -- -
---------- - -----
---
-
-
------------------------ -
--------- -
-----
--------- -- ----------- ------
------
--
----------- ----------------
---在以上示例应用中，AppComponent 和 AnotherComponent 两个组件之间通过 EventService 实现了 count 数据的共享。AppComponent 组件内部的 increase 方法会通过 EventService 触发 countChange 事件，而 AnotherComponent 则通过监听 countChange 事件来更新 count 数据。这样便能够实现两个组件之间的数据传递。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ff81e8991b448d521d