Angular2: Kommunikation zwischen Geschwisterkomponenten

Question

Ich habe die folgende Struktur einer Angular2-Anwendung.

Innen app.html Datei

<search></search> 
<search-results></search-results> 

Beide SearchComponent und SearchResultsComponent getrennte Bauteile sind. Ich habe auch einen Dienst wie unter

Innen Service-Datei

.... 
    getFilteredData(input:string): Observable <any>{ 
    return this.http.get(`${this.URL}${input}&api_key=DEMO_KEY`) 
     .map(response => response.json()) 
     .catch((error:any) => Observable.throw(error.json().error || 'server error')); 
    } 
.... 

Innerhalb des SearchComponent ich eine Vorlage mit einem Eingabefeld haben und Taste wie folgt:

.... 
    <input type="text" class="form-control" id="input" 
     [(ngModel)]="model.input" name="input" #ipnut="ngModel"> 
    </div> 
    <button type="submit" class="btn btn-primary">Search</button> 
.... 

Problem: Was ist der Der beste Weg, den Service auszuführen und die Ergebnisse an die SearchResultsComponent zu übergeben? Ich weiß, ich sollte die Observable getFilteredData abonnieren, aber wie initiiere ich die Suche selbst (dh übergeben Sie die Daten von der Formulareingabe zum Dienst, sobald die Schaltfläche geklickt wird)

Answer 1

Erstellen Sie einen Master-Service (der einmal instanziiert und verwendet wird durch die Such- und Suchergebniskomponente).

In diesem Service erstellen Sie einen Betreff (Behaviour Subject oder Replay Subject).

Verwenden Sie diesen Betreff in der Suchkomponente, um die Daten in diesem Fall als Suchwort auszugeben.

Jetzt Subscribe zu diesem Thema in Suchergebnis-Komponente und in seinem Erfolg rufen Sie Ihre "GetFilteredData" -Funktion mit Parametern hier Suchwort, das Sie von Subskription an den Betreff erhalten haben.

Ich hoffe, das hilft.