如何從不嵌套的父組件傳遞到子組件？

Question

我有2個組件， list component和details component 。 如何將對象從列表組件傳遞到詳細信息組件？

我知道我必須使用@Input()裝飾器，但問題是details component未嵌套在list component 。 它完全是獨立的。

Answer 1

最簡單的方法是使用服務。 看看https://angular.io/guide/component-interaction

Answer 2

您可以有一個父組件來包裝兩者並控制它們之間的通信，或者也許可以使用以數據為中心的共享服務。

<parent>
  <list [items]="items" (onSelectItem)="itemSelected()"></list>
  <detail [item]="selectedItem"></list>
</parent>

s

class ParentComponent {
  items = [...],
  selectedItem = null;

  itemSelected(item){
    this.selectedItem  = item;
  }
}