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

Question

我正在尝试将数据从既不是子组件也不是父组件的组件发送到另一个组件。

我创建了一个 Plunker 来显示我的问题。

当以下代码被触发时，我想要一些东西来监听它。

 fillSelectT(item){
  //populate Select to
}

下面的代码应该监听数据。

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

在 C# 中，它类似于 EventAggregator 我想弄清楚的东西。

Answer 1

我根据你的例子做了完整的工作示例。

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

selectedItems: any[] = [];

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

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

2) 修改select-from组件触发一个事件：

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

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

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

@Input() selectedItems:any = [];

此处修改：Plunker

Answer 2

As documented here: 你应该在两个组件之间共享一个服务，在选择一个项目时从服务发出事件，并监听从另一个组件发出的事件。

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

您的 plunkr，已修改：http://plnkr.co/edit/qJ8bh7wN9qQvKTLJOb0T?p=preview

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

Angular 2 Send Objects between not related components

typescript

angular2-services