角2兄弟通信

Question

角2兄弟通信我有个列表成分。在ListComponent中单击项时，应在DetailComponent中显示该项的详细信息。两者同时出现在屏幕上，因此不涉及路由问题。如何告诉DetailComponent单击了ListComponent中的哪些项？我已经考虑过在父程序(AppComponent)之前发出一个事件，并让父程序在DetailComponent上用@Input设置selectedItem.id。或者我可以使用具有可观察订阅的共享服务。编辑：但是，通过事件+@输入设置所选项不会触发DetailComponent，以防我需要执行其他代码。所以我不确定这是一个可以接受的解决方案。但这两种方法似乎都比通过$rootScope.$广播或$Scope.$Parent.$广播的角度1方式做事情要复杂得多。由于所有的角度2都是一个组件，我很惊讶没有更多关于组件通信的信息。是否有另一种/更直截了当的方法来实现这一点？

Answer 1

一种方法是使用共享服务.

然而，我发现下面的解决方案要简单得多，它允许在两个兄弟姐妹之间共享数据。角5)

在您的父组件模板中：

<!-- Assigns "AppSibling1Component" instance to variable "data" --><app-sibling1 #data></app-sibling1>
<!-- Passes the variable "data" to AppSibling2Component instance --><app-sibling2 [data]="data"></app-sibling2>

应用程序2.组件.ts

import { AppSibling1Component } from '../app-sibling1/app-sibling1.component';...export class AppSibling2Component {
   ...
   @Input() data: AppSibling1Component;
   ...}