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

Question

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

如果不使用@input和@output,我们可以将数据发送到一个页面组件到另一个页面组件.

谢谢

Answer 1

阅读这篇关于组件交互和流程的Angular cookbook,特别是关于监听子事件的父组件的这一部分.

基本上,EventEmitter完全是为了父组件从子级获取数据的目的.所有@Output都是EventEmitters,而@Output装饰器公开父类可以在其模板中附加侦听器的事件.

在子组件中,您可以像这样定义一个EventEmitter:

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

你发出这样的事件:

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

完成后,父级可以监听事件并附加一个回调,只需:

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

它使(子 - >父)通信像普通的分层数据流一样容易(父 - >子).您可能已经或可能没有注意到,当您从父级向子级发送信息时,父级使用[方括号]绑定到模板中子级的@Input属性.当父级从子级接收信息时,在其模板中,它将使用(括号)绑定到子级的@Output事件.这是Angular 2中的一个重要原则.

@Input()属性是[方括号],因为 @Output()是事件是(括号).

要回答您的其他问题,是的,组件层次结构中彼此不直接"下一步"的组件可以进行通信,但在这种情况下,需要使用Angular 2服务的公共实例作为中间人.阅读我之前链接的Angular 2食谱的这一部分,以了解更多相关信息.

另请参阅: 关于Angular 2数据流的非常有用的视频