如何从父嵌套传递给非嵌套的子组件？

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>

的js

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

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