Angular 2在不相关的组件之间发送对象

I am trying to send data to another component from a Component that isn't a child nor a parent.

我正在尝试从不是子项或父项的组件向另一个组件发送数据。

I have created a Plunker to show what i am asking.

我创建了一个Plunker来展示我的要求。

when the following code is fired I would like something to listen for it.

当下面的代码被触发时，我想要听一些东西。

 fillSelectT(item){
  //populate Select to
}

the following code should listen for the data.

以下代码应该监听数据。

  listener(item){
    selectedItems.push(item);
  }

In C# it would be simmular to an EventAggregator what I am trying to figure out.

在C＃中，对于一个EventAggregator来说，我想要弄清楚它是什么。

2 个解决方案

#1

As documented here: you should share a service between the two components, emit events from the service when selecting an item, and listen to the events emitted from the other component.

如此处所述：您应该在两个组件之间共享服务，在选择项目时从服务发出事件，并监听从另一个组件发出的事件。

@Injectable()
class SelectionService {
  selections = new Subject<any>
  select(item) {
    this.selections.next(item);
  }
}

Your plunkr, modified: http://plnkr.co/edit/qJ8bh7wN9qQvKTLJOb0T?p=preview

你的plunkr，修改过：http：//plnkr.co/edit/qJ8bh7wN9qQvKTLJOb0T？p = preview

#2

I did I full working exemple based on yours.

我根据你的情况完成了我的全部工作。

1) Both components are child of AppComponent, then create variable and events to fire and store those:

1）两个组件都是AppComponent的子组件，然后创建变量和事件来触发和存储它们：

selectedItems: any[] = [];

onSelectItem(item) {
   this.selectedItems.push(item);
}

<select-from (onSelectItem)="onSelectItem($event)"></select-from>
<select-to [selectedItems]="selectedItems"></select-to>

2) Modify the select-from component to fire an event:

2）修改select-from组件以触发事件：

@Output() onSelectItem = new EventEmitter<any>();

 fillSelectT(item){
      this.onSelectItem.emit(item);
 }

3) Modify the select-to component to receive a list from it's caller component:

3）修改select-to组件以从其调用者组件接收列表：

@Input() selectedItems:any = [];

Here the modifications:Plunker

这里有修改：Plunker

#1