什么是 eventemitter 和 eventemitter 服务。我们如何在没有@output 和@input 的情况下使用事件发射器？

Question

我是 angular2 的新手，我对使用 EmitterService 的 EventEmitter 感到困惑，任何人都可以向我解释 Emitter 的用途。

并且不使用@input 和@output 我们可以将数据发送到一个页面组件到另一个页面组件。

谢谢

Answer 1

阅读 this Angular cookbook about component interaction and flow, especially this 关于 parent 组件侦听 child 事件的部分。

基本上，EventEmitter 的目的正是为了 parent 组件从 children 获取数据。所有@Outputs 都是 EventEmitters，@Output 装饰器公开一个事件，parents 可以在其模板中附加监听器。

在 child 组件中，您可以像这样定义一个 EventEmitter：

@Output() childEventEmitter = new EventEmitter<any>();

你发出这样的事件：

this.childEventEmitter.emit("Send this to the parent");

完成后，parent 可以侦听事件并附加回调，仅此而已：

<child-component (childEventEmitter)="parentCallback(whateverWasEmitted)"></child-component>

它使 (child -> parent) 通信像普通分层数据流 (parent -> child) 一样简单。您可能注意到，也可能没有注意到，当您将信息从 parent 发送到 child 时，parent 绑定到模板中带有 [square 的 child 的 @Input 属性括号]。当 parent 在其模板中从 child 接收信息时，它会使用 (parenthesis) 绑定到 child 的 @Output 事件。这是Angular2中的重要原则。

@Input() 是属性是 [方括号] as @Output() 是事件是 (parenthesis)。

要回答您的其他问题，是的，在组件层次结构中不直接 'next' 彼此的组件可以进行通信，但在这种情况下， Angular 2 服务需要充当 middle-man 之类的。阅读我之前链接到的 Angular 2 食谱的 this section 以了解更多相关信息。

另请参阅： Very helpful video about Angular 2 data flow

什么是 eventemitter 和 eventemitter 服务。我们如何在没有@output 和@input 的情况下使用事件发射器？

what is eventemitter and eventemitter service. How we use Event emitter without @output and @input?

angular

typescript

eventemitter