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

时间:2017-01-09 20:08:17

标签: typescript angular2-services

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

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

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

 fillSelectT(item){
  //populate Select to
}

以下代码应该监听数据。

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

在C#中,我想要弄清楚EventAggregator的类似内容。

2 个答案:

答案 0 :(得分:2)

作为documented here:您应该在两个组件之间共享服务,在选择项目时从服务中发出事件,并聆听从其他组件发出的事件。

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

你的傻瓜,修改过:http://plnkr.co/edit/qJ8bh7wN9qQvKTLJOb0T?p=preview

答案 1 :(得分:0)

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

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