Angular 2 个组成部分:儿童与儿童的交流

Angular 2 components: child to child communication

我在 Angular 2 应用程序中包含三个组件:C0、C1 和 C2。第一个 (C0) 表示一个 html 模板,具有多个子组件(ui 元素)。 现在,如果有人单击 C1(菜单)中的 按钮,我如何 通知 C2(日历)?

我尝试了 angular 站点 component communication page 中的一些示例。我最终采用了一种方法,我在 C1 处使用 EventEmitter 来通知父 C0。然后用一个setter通知C2.

这行得通,但看起来很乱,即使对于一手充满事件的人来说也是如此。这不是解决方案,如果我的应用程序最终可能有数百个事件。

是否有更好的方法来处理此类通信?

我认为你应该像你提到的那样在 C1 中添加一个 EventEmitter
您可以绑定到 C2 上的方法而不涉及 C0,方法是将模板变量添加到 C2 并使用它来引用它,例如:

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

您可以创建一项在您的 child 组件之间共享的服务,您可以在其中定义 Observable,以便您可以从一个 child 订阅该 Observable并在您从另一个 child 收到一些值时执行一些操作。您可以检查用于 parent 到 child 通信的 ,但您可以使用相同的方法进行 child 到 child 通信。

Is there a better way, to handle such kind of communication?

取决于您认为哪个更好 ;)。

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

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

Is there a better way, to handle such kind of communication?

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

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