Как перейти от родительского к дочернему компоненту, который не является вложенным?

Question

У меня есть 2 компонента, list component и details component. Как передать объект из компонента списка в компонент подробностей?

Я знаю, что должен использовать декоратор @Input(), но проблема в том, что details component не вложен в list component. Это полностью само по себе.

Answer 1

У вас может быть родительский компонент, который объединяет и контролирует связь между ними, или, возможно, вы можете использовать общую службу, которая центрирует данные.

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

Js

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

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

Answer 2

Самый простой способ - воспользоваться услугой. Взглянуть https://angular.io/guide/component-interaction