Angular 2 同级组件通信

Question

我有一个 ListComponent。当在 ListComponent 中单击一个项目时，该项目的详细信息应显示在 DetailComponent 中。两者同时出现在屏幕上，因此不涉及路由。

如何告诉 DetailComponent 单击了 ListComponent 中的哪些项目？

我已经考虑将事件发送到父级（AppComponent），并让父级使用@Input 在 DetailComponent 上设置 selectedItem.id。或者我可以使用带有可观察订阅的共享服务。

---

编辑： 通过 event + @Input 设置所选项目不会触发 DetailComponent，但如果我需要执行其他代码。所以我不确定这是一个可以接受的解决方案。

---

但是这两种方法似乎都比 Angular 1 通过 \(rootScope.\)broadcast 或 \(scope.\)parent.$broadcast 做事的方式复杂得多。

由于 Angular 2 中的所有内容都是一个组件，我很惊讶没有更多关于组件通信的信息。

是否有另一种/更直接的方法来实现这一点？

原文由 dennis.sheppard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

进行兄弟间通信的一种巧妙方法是在一个孩子中使用 @Output 装饰器，在另一个孩子上使用 模板引用变量，让父母 调用这个孩子的方法。这与使用@Ouput 进行子父通信极为相似。

在 child-2 中执行 this.emitSomething.emit(something); 将触发 child-1 中的 onEmitSomething() 。

child-1.component.ts

 onEmitSomething(event: any): void {
  // do something
}

child-2.component.ts

 @Output() emitSomething: EventEmitter<any> = new EventEmitter<any>();

父组件.html

 <child-1 #child1></child-1>
<child-2 (emitSomething)="child1.onEmitSomething($event)"></child-2>

可以在这里找到两种不同的组件交互方式 Angular - Component Interaction

原文由 jna 发布，翻译遵循 CC BY-SA 4.0 许可协议