在 Angular 开发中，组件是应用程序的基本构建块，组件之间的通信是非常重要的。Angular 提供了几种方式来实现组件间通信，其中，使用事件（EventEmitter）是一种非常常见和有效的方式。
EventEmitter 介绍
EventEmitter 是 Angular 核心库中的一个类，可以用于实现自定义事件。它基于观察者模式（Observer Pattern），能够让一个组件发布事件，并允许其它组件订阅这些事件。
在组件中，我们可以通过以下方式声明和使用 EventEmitter：
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------
--------- -
------- --------------------- --------------
-
--
------ ----- -------------- -
--------- ------ -------------------- - --- -----------------------
------ -
---------------------- --------
-
-在上面的例子中，我们声明了一个 EventEmitter，并通过 @Output() 装饰器将它暴露给父组件。然后，我们在 send() 方法中调用 emit() 方法发送一个字符串类型的事件。
父组件订阅事件
一旦子组件发出事件，父组件就可以通过订阅这个事件来完成响应的操作。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
---------- ------------------------------------------
-
--
------ ----- --------------- -
-------------------- ------- -
---------------------
-
-在父组件中，我们在模板视图中使用子组件，并通过 (event) 语法订阅事件。当子组件发送事件时，handleEvent() 方法将会被调用，并且会接收到事件的参数。
传递对象类型的数据
当需要传递对象类型的数据时，我们可以简单地将这个对象作为事件的参数传递。
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
--------- ---- -
--- -------
----- -------
-
------------
--------- ------------
--------- -
------- --------------------- --------------
-
--
------ ----- -------------- -
--------- ---------- ------------------ - --- ---------------------
------ -
----- ----- ---- - - --- -- ----- ----- ---- --
--------------------------
-
-在父组件中，我们可以使用与前面相同的方式订阅事件，并接收到 User 对象。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
--------- ---- -
--- -------
----- -------
-
------------
--------- -------------
--------- -
---------- --------------------------------------------------
-
--
------ ----- --------------- -
--------------------- ----- -
------------------
-
-组件间通信的实际应用
在实际开发中，我们通常需要在组件间共享数据或通知其它组件完成某个操作。通过 EventEmitter，我们可以构建更加灵活且可维护的应用程序。
例如，在一个电子商务应用程序中，当我们需要添加商品到购物车中时，可以通过 EventEmitter 实现组件之间的通信。我们可以在产品列表组件中发送一个事件，让购物车组件监听这个事件并将产品添加到购物车中。代码如下：
产品列表组件：
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
--------- ------- -
--- -------
----- -------
------ -------
-
------------
--------- -------------------
--------- -
---- ----------- ------- -- ----------
------ ------------ -- - -- ------------- -------
------- -------------------------------- -- -------------
------
-
--
------ ----- -------------------- -
--------- --------------- --------------------- - --- ------------------------
--------- --------- - -
- --- -- ----- -------- --- ------ --- --
- --- -- ----- -------- --- ------ --- --
- --- -- ----- -------- --- ------ --- --
-
------------------ -------- -
----------------------------------
-
-购物车组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
--------- ------- -
--- -------
----- -------
------ -------
-
------------
--------- -----------
--------- -
-------------
----
--- ----------- ------- -- -------- ------------ -------
-----
-
--
------ ----- ------------- -
----- --------- - ---
----------------------------- -------- -
------------------------
-
-在购物车组件中，我们订阅了 addToCartEvent 事件，并在事件处理程序中将产品添加到购物车列表中。在产品列表组件中，我们在按钮点击时发送 addToCartEvent 事件，以便通知购物车组件添加产品。
总结
EventEmitter 是 Angular 中一种非常有用的组件间通信方式。通过它，我们可以发送和接收自定义事件。在实际应用中，我们可以使用 EventEmitter 构建可以灵活且可维护的 Angular 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472e365968c7c53b00704cc