Angular - 什么是 EventEmitter 和 EventEmitter 服务。我们如何在不使用 @Output 和 @Input 的情况下使用 EventEmitter？

我刚接触 Angular2，对于使用 EmitterService 的 EventEmitter 感到困惑，有人能向我解释一下 Emitter 的用途吗？

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

谢谢

答案＃1

阅读这个关于 Angular 组件交互和流程的手册，特别是这一部分关于父组件监听子组件事件的内容。

基本上，EventEmitters 的目的正是用于父组件获取来自子组件的数据。所有的 @Outputs 都是 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 数据流的非常有用的视频