简介
Angular 是一个流行的前端框架，它的组件化架构让开发者能够轻松构建可重用的界面组件。在 Angular 应用中，组件之间的通信是非常重要的，这种通信可能包括：
- 父子组件之间的通信
- 兄弟组件之间的通信
- 跨级组件之间的通信
在本文中，我们将讨论 Angular 中如何使用 EventEmitter 来实现组件间通信。EventEmitter 是一个非常有用的功能，它允许我们在组件之间传递数据和消息。
什么是 EventEmitter？
EventEmitter 是一个 Angular 核心库提供的服务，它允许开发者在应用程序中创建并处理自定义事件。通过创建 EventEmitter 实例，我们可以定义我们自己的事件类型，并在组件之间传递事件数据。
如何在组件间使用 EventEmitter？
首先，我们需要在一个组件中创建一个 EventEmitter 实例。这个组件将成为事件的发布者。然后，我们需要将这个 EventEmitter 实例传递给其他组件，这些组件将成为事件的接收者。
在发布者组件中创建 EventEmitter 实例的步骤如下：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ ----- ------------------ -
------------ -------------------- - --- -----------------------
----------------- ------- -
----------------------------
-
-在上面的代码中，我们创建了一个名为 dataChanged 的 EventEmitter 实例，并将事件的类型定义为 string。在 publishData() 方法中，我们使用 emit() 方法来触发事件，并将需要传递的数据作为参数传递给 emit() 方法。
在接收者组件中，我们需要定义一个事件监听器来接收发布者组件发出的事件。监听器可以通过订阅事件来完成。在 Angular 中，我们通常使用 @Output() 装饰器来定义一个输出属性，这个属性可以作为 EventEmitter 实例来向外部组件发送事件。
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------ - ---- ----------------
------------
--------- ---------------
--------- --------------------
--
------ ----- ----------------- -
-------- -------- -------
--------- ------------ -------------------- - --- -----------------------
------------------- ------- -
------------ - -----
-
---------- -
----------------------------------------------------------
-
-在上面的代码中，我们使用 @Output() 装饰器创建了一个名为 dataChanged 的输出属性，这个属性是一个 EventEmitter 实例，在接收者组件中，我们定义了一个名为 onDataChanged() 的回调函数，这个函数将接收来自发布者组件的事件数据并更新 message 属性。
最后，我们在接收者组件的生命周期钩子函数 ngOnInit() 中，通过调用 subscribe() 方法来订阅事件。
示例代码
下面是一个简单的示例代码，它包括一个发布者组件 PublisherComponent 和一个接收者组件 ReceiverComponent，这两个组件之间使用 EventEmitter 实现通信。
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------ - ---- ----------------
------------
--------- ----------------
--------- -------- --------------------------------- --------------
--
------ ----- ------------------ -
--------- ------------ -------------------- - --- -----------------------
--------------- -
--- ---- - ------- --------
----------------------------
-
-
------------
--------- ---------------
--------- --------------------
--
------ ----- ----------------- -
-------- -------- -------
--------- ------------ -------------------- - --- -----------------------
------------------- ------- -
------------ - -----
-
---------- -
----------------------------------------------------------
-
-在上面的示例代码中，我们创建了一个名为 PublisherComponent 的组件和一个名为 ReceiverComponent 的组件，它们分别用于发布和接收事件。在 PublisherComponent 中，我们创建了一个 dataChanged 实例并将其定义为输出属性，在点击按钮时会触发这个事件。在 ReceiverComponent 中，我们定义了一个 message 属性来显示来自发布者组件的事件数据，并且通过 ngOnInit() 操作来订阅事件。
总结
在 Angular 应用中，使用 EventEmitter 是非常常见的做法，它允许我们在组件之间传递数据和消息。本文中，我们讨论了如何创建和使用 EventEmitter 实例来实现组件间通信，并提供了示例代码以供参考。希望本文对你的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520d57a95b1f8cacd849530