在父组件相同的两个组件之间发送数据

Question

• 我有两个子组件product-list.component， product-details.component的父组件是 products.component。

  • 在product-list.component中，我正在显示虚拟产品列表。
  • 在product-details.component中，我要显示单击的产品详细信息。 单击列表后，我在父组件（products.component）中得到了选定的产品。

*我要在product-details.component中显示选定的产品。

Link of project is here

Answer 1

您快到了。 ProductListComponent的输出成为ProductDetailsComponent的输入。为此，您只需要在ProductDetailsComponent中设置products.component.html的输入即可：

<app-product-details [detailRowInput]="detailSingleRow"></app-product-details>

请参阅stackblitz

Answer 2

对于基础知识，您应该做的是：

• 检查此链接：https://angular.io/guide/component-interaction
• 捕获click事件，并将product分配给@Output变量。
• 现在在父组件HTML上，监听@Output事件（您将获得product版本的click。）

• 现在如上链接中所述，使用product将此productDetail传递到@Input。

  产品组件的代码如下：

  <product-list (itemSelected)="loadDetails(any)">
  </product-list>
  
  <product-detail [selectedItem]="any">
  <product-detail>