Angular 2如何从孙子组件向父组件发送事件？

Question

我有一个GridComponent 在 PopupComponent 中。

我想要发送一个 "RowSelected" 自定义事件到 PopupComponent 外的一个组件。

我目前是从 GridComponent 发送事件到 PopupComponent 然后再转发到外部。但这是一个非常痛苦的方法，因为我计划有大量的 PopupComponents。

是否有其他方法进行事件转发？

- Luka Šilje

---

使用具有主题的服务，请参见https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service - Mark Rajcok

你知道不同的GridComponent（例如一个包含人员，另一个包含工作）是否会共享同一个服务吗？ 那对我来说很不幸。 - Luka Šilje

每个GridComponent可以拥有自己的某些服务实例。此外，您还可以为一些GridComponents集合拥有某些其他OutsideService的单个实例。 - Mark Rajcok

我之前也在reddit.com/r/angular2上问过这个问题。其中一种推荐的方法是使用Observable。 - Jek

Answer 1

每当您没有直接的父子关系时，请使用（共享）服务来共享数据和/或发送事件。

在服务内部，使用Subject或Observable来实现此功能。

文档中有一个示例，演示了如何使用Subject实现组件之间的双向通信。

这篇SO帖子Delegation: EventEmitter or Observable in Angular2，演示了如何使用Observable。

- Mark Rajcok

---

谢谢！当存在父=>孙子关系时，一切都很好，但是当“孙子”在应用程序的上下文中独立存在时，它会报告：没有为服务（孙子->服务）提供程序。 - Luka Šilje

@LukaŠilje，听起来你在组件层次结构中没有定义足够高（使用providers）的服务。我建议你查看层次依赖注入文档。 - Mark Rajcok

你好。在我转换到发布版（2.0.0）之前，它一直在工作。有什么想法吗？ 我正在将服务注入到AppComponent的提供程序中。 - Luka Šilje

看起来它们没有相同的服务。我使用了BehaviorSubject来查看其值，在一个组件中它始终为null而在另一个组件中不为null。 - Luka Šilje

@LukaŠilje，请参考https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-root-component-or-module--在AppModule中提供您的服务，而不是在AppComponent中。 - Mark Rajcok

谢谢！它真正解决了我的问题。在每个使用公共服务的组件中，我都有“providers：[thatCommonService]”，而不是仅在一个地方（模块）声明它。我还不习惯使用模块。 - Luka Šilje