Question

一些信息

我是Angular2的新人。我正在开发我的第一个应用程序，主要是作为一种爱好。我推荐的网络应用程序要求类似于Plaxo，这是个人议程。我的问题＆＃34;在地址簿部分：

这是地址簿部分的屏幕截图。我想做类似的事情。如您所见，Plaxo按组（第一列）组织联系人。您可以选择属于所选组的联系人（第二列）。您可以查看所选联系人的信息并修改，删除，导出...

那么，我该如何组织这个呢？

每列应该是不同的组件。首先是 group＆＃39; s-list.component ，然后是 contacts-list.component ，最后是 contact-info.component 。< / p>

我的问题：

在角度2中，有几种方法可以实现组件交互。但在这种情况下，遗憾的是，组件不是像Angular's Component interaction Cookbook中列出的方法中的父级和子级，而是Angular's quickstart tutorial中使用的方法。

那么，这将是这个兄弟组件之间进行通信的最佳方法吗？

输入绑定：只需使用这三个组件的父级，并将必须显示的数据传递给他们。
参数化路由：使用角度路由器并通过URL传递一些数据。例如： myapp.com/addressbook/ [SOME_GROUP_ID] / [SOME_CONTACT_ID] （myapp.com/addressbook/3/23）第3组，联系人23。
其他...

PD：如果我的问题不清楚，也欢迎链接到例子。

Answer 1

您可以将模板变量放在元素上并互相引用

<a-cmp #a (someEvent)="b.doSomething()">
<b-cmp #b (someOtherEvent)="a.doSomething()">

或者您可以使用您在公共父级提供的共享服务并注入两个兄弟姐妹。

Answer 2

当您拥有@Input API方案时，会使用

Parent-Child 。对于兄弟组件，您可以考虑使用 SharedService 进行数据交换。