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

Question

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

在不使用@input 和@output 的情况下，我们可以将数据从一个页面组件发送到另一个页面组件。

谢谢

Answer 1

阅读this Angular cookbook about component interaction and flow,特别是this关于父组件监听子事件的部分。

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

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

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

你发出这样的事件:

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

完成后，父级可以监听事件并附加一个回调，仅此而已:

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

它使(子级 -> 父级)通信像普通的分层数据流(父级 -> 子级)一样简单。您可能注意到也可能没有注意到，当您从父级向子级发送信息时，父级使用 [方括号] 绑定(bind)到模板中子级的 @Input 属性。当 parent 从 child 那里收到信息时，在其模板中，它会使用(括号)绑定(bind)到 child 的@Output 事件。这是 Angular 2 中的一个重要原则。

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

要回答您的其他问题，是的，组件层次结构中不直接“相邻”的组件可以进行通信，但在这种情况下，需要一个 Angular 2 服务的公共(public)实例来充当某种中间人。阅读this section我之前链接到的 Angular 2 食谱的一部分，以了解更多相关信息。

另见: Very helpful video about Angular 2 data flow