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

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

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

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

谢谢

阅读 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