当你开始学习Angular时，你学到的第一件事之一就是如何在子组件和父组件之间通信。

数据通过属性绑定流入组件，通过事件绑定从组件流出。

如果你想让你的组件通知其父组件某些事情，你可以使用Output装饰器和EventEmitter创建一个自定义事件。

我们可以使用Output装饰器将我们的属性add标记为一个组件可以触发以向其父组件发送数据的事件。

父组件可以像这样监听事件：

Angular将订阅add事件并在组件触发next()方法时调用addTodo()方法以获取数据。

EventEmitter是什么 😕

如果你查看源代码，你会看到一些有趣的东西。

幕后，事件发射器只是一个Subject。

你可以从源代码中学到的第一件事是，你可以向EventEmitter传递一个布尔值，确定是同步还是异步发送事件。（默认是同步的）

💪 你拥有Rx的力量 💪

因为EventEmitters是Subjects，我们可以使用所有Rx的好处。例如，我们想只在有值时发出事件。

非常酷！😎

这还不是全部。我们还可以使用任何我们想要的Subject。让我们尝试使用BehaviorSubject。

👂EventEmitters !== DOM事件 😲

与DOM事件不同，Angular自定义事件不会冒泡。如果你定义了这样的东西，那意味着：

你只能在父级监听TodoComponent的toggle事件。

所以这个可以工作：

但这个不行：

🤓 解决方案 —

1. 将事件一直传递到树上

在这个例子中没问题，但如果你有嵌套的组件，这可能会让人沮丧。

2. 使用本机DOM事件

你可以像这样创建本机DOM事件：

通过调用dispatchEvent()方法来触发自定义事件。我们可以使用detail属性向我们的事件传递数据。

事件冒泡在这里将起作用，但这种方法的问题是，我们错过了在非DOM环境中（如本机移动、本机桌面、Web Worker或服务器端渲染）执行的机会。

3. 共享服务

我们使用TodoService作为消息总线。你可以从文档中了解更多关于这种方法的信息。

译自：https://netbasal.com/event-emitters-in-angular-13e84ee8d28c