Angular 中的 @Output 装饰器和 EventEmitter 提供了一种方便的机制来实现组件间的通信。在这篇文章中，我们将深入学习如何使用它们来发送事件。
什么是 @Output 装饰器和 EventEmitter？
@Output 装饰器是 Angular 中用来标记一个属性，使得该属性可以被用于与其它组件进行交互的装饰器。@Output 装饰器需要绑定到一个 EventEmitter 实例上，这个实例可以使用 .emit() 方法来触发一个事件并将所需的数据传递给其它组件。
如何使用 @Output 装饰器和 EventEmitter？
首先，在你的组件中添加 @Output 装饰器来标记一个属性，并为它赋予一个 EventEmitter 实例。在以下示例代码中，我们将创建一个名为 "onClicked" 的属性，该属性将使用 EventEmitter 发送一个名为 "clickEvent" 的事件：
-- -------------------- ---- -------
------ - ---------- ------- ------------ - ---- ----------------
------------
--------- ------------
--------- -------- ------------------------- ------------
--
------ ----- ----------------- -
--------- --------- - --- -----------------------
--------- -
----------------------------------
-
-接下来，让我们创建另一个组件，然后在其模板中使用我们的 MyButtonComponent：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- ---------
--------- ----------- -----------------------------------------------------
--
------ ----- ------------ -
------------------------ ------- -
-------------
-
-在代码中可以看到，我们将 MyButtonComponent 添加到了 AppComponent 的模板中。我们还在 AppComponent 中创建了一个处理 MyButtonComponent 的 "onClicked" 事件的方法 onMyButtonClicked()。在 MyButtonComponent 的 click 事件中，我们调用了 .emit() 方法，并将一个名为 "clickEvent" 的字符串传递给了 onMyButtonClicked()。
这样，每当我们在 MyButtonComponent 上点击按钮时，组件中的 "onClicked" 属性将发出一个 "clickEvent" 事件，它将被传递到 AppComponent 中的 onMyButtonClicked() 方法中，并在那里弹出一个消息框。
总结
@Output 装饰器和 EventEmitter 提供了一个简单的方式来在 Angular 组件之间进行通信。我们可以通过创建一个 EventEmitter 实例并将其与 @Output 装饰器绑定来发送事件，并使用 .emit() 方法来触发事件并传递数据。希望本文可以帮助您更好地了解如何使用这个强大的机制在您的应用程序中进行组件间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a70beb48841e98943a51c2