Angular 2 Senden von Objekten zwischen nicht verwandten Komponenten

Question

Ich versuche, Daten von einer Komponente, die weder untergeordnet noch übergeordnet ist, an eine andere Komponente zu senden.

Ich habe eine Plunker erstellt, um zu zeigen, was ich frage.

Wenn der folgende Code ausgelöst wird möchte ich etwas darauf hören.

fillSelectT(item){ 
    //populate Select to 
} 

der folgende Code sollte auf die Daten warten.

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

In C# wäre es zu einem EventAggregator simmular sein, was ich, um herauszufinden versuchen.

Answer 1

Als documented here: Sie einen Dienst zwischen den beiden Komponenten gemeinsam nutzen sollte, emittieren Ereignisse aus dem Dienst bei der Auswahl eines Elements und hören auf die Ereignisse von der anderen Komponente emittieren.

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

Ihre plunkr, geändert: http://plnkr.co/edit/qJ8bh7wN9qQvKTLJOb0T?p=preview

Answer 2

Ich habe ich voll arbeiten Beispiel basiert auf Ihrer.

1) Beide Komponenten sind Kind AppComponent, dann erstellen Variable und Ereignisse jene abzufeuern und speichern: ein Ereignis

selectedItems: any[] = []; 

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

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

2) Ändern Sie die select-from Komponente Feuer:

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

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

3) Ändern Sie die select-to Komponente, um eine Liste von ihrer Aufrufer-Komponente zu erhalten:

@Input() selectedItems:any = []; 

Hier die Änderungen: Plunker