Angular 2组成部分：儿童与儿童之间的沟通

Question

我在Angular 2应用程序中有三个组件：C0，C1和C2。第一个（C0）表示一个html模板，具有多个子组件（ui元素）。 现在，如果有人点击了C1 （菜单）中的按钮，我该如何通知C2 （日历）呢？

我尝试了角度网站component communication page的一些例子。我最后采用了一种方法，在C1 中使用 EventEmitter，通知父C0。然后使用 setter通知C2 。

这很有效，但是看起来非常凌乱，即使对于充满活动的手来说也是如此。如果我的应用程序最终可能有数百个事件，那么这个解决方案就无法解决。

有没有更好的方法来处理这种沟通？

Answer 1

我认为您应该如上所述向EventEmitter添加C1 您可以通过向C2添加模板变量来绑定C0上的方法而不涉及C2，并使用它来引用它：

<c1 (customEvent)="c2.onClick($event)"></c1>
<c2 #c2></c2>

Answer 2

您可以创建一个在您的子组件之间共享的服务，您可以在其中定义Observable，以便您可以从一个孩子订阅Observable并在收到某些值时执行某些操作另一个孩子。您可以查看用于父母与子女沟通的https://stackoverflow.com/questions/39738974#39739184，但您可以使用相同的方法进行儿童与儿童之间的沟通。

Answer 3

  

有没有更好的方法来处理这种沟通？

取决于你认为更好的东西;）。

有一些方法可以运行，你只需要选择更容易理解的数据流，并且似乎更适合你。

例如您可以使用服务在这两个组件之间进行通信。这就是我这样做的方式，我实现了Services中的所有通信逻辑，因此我的组件仅用于表示逻辑。

Answer 4

  

有没有更好的方法来处理这种沟通？

你可以用事件完美地解决这个问题，但如果你使用redux（或在angular2，ngrx / store中），这些问题往往会变得更容易。有很多关于这个主题的好文章和视频，虽然起初看起来有点奇怪，但一段时间后变得非常自然。

Google围观并观看一些视频，这是一种非常有趣的工作方式，您也将开始了解rxjs的作用以及它如何在您的应用中提供帮助。