rxjs Betreff - klar?

Question

Ich lief durch das Tutorial Tour of Heroes und änderte ein wenig. Ich habe das Suchfeld in die Navigationsleiste verschoben. Auf der Suche, es hat eine Drop-Down-Suche:

Ein Klick auf einen der li in der Gruppe auf die Detailseite der einzelnen Helden navigieren. Das Problem, das ich habe, ist, dass die Navigation den Suchbegriff nicht löscht. Dies ist meine aktuelle Funktion:

export class HeroSearchComponent implements OnInit { 
    heroes: Observable<Hero[]>; 
    private searchTerms = new Subject<string>(); 
... 
    gotoDetail(hero: Hero): void { 
    let link = ['/detail', hero.id]; 
    this.router.navigate(link); 
    } 

Mein Gedanke war, dass ich this.searchTerms.clear(), wenn ein solches Verfahren existiert nennen könnte, aber ich bin nicht allzu vertraut mit rxjs Themen. Ich könnte es auch reinitialisieren:

this.searchTerms = new Subject<string>(); 

aber würde dies nicht jedes Mal ein neues Objekt erstellen, wenn ich suche? Was ist der beste Weg, dies zu lösen?

Darüber hinaus bin ich mir nicht sicher, dass diese Navigation funktioniert. Wenn ich auf diese Weise navigiere, scheint es nicht die @Input() zu verwenden, die in einer Unterkomponente ist.

Edit: im Einsatz auf heroku für Leute, um das Problem zu sehen. So replizieren:

1. gehen zu einer 'Helden Detail' Seite des Helden 11:
   • Note der Spinn svg. Dies ist die Komponente spinner img. Wenn der IMG nicht gefunden werden kann (oder geladen wird), wird standardmäßig ein Spinner img verwendet. OnLoad ändert das Bild in das tatsächliche Bild. Held 11 hat kein Bild, der Spinner bleibt also (gewünschter Effekt).
2. Geben Sie "m" in die Suchleiste im Nav ein.
3. klicken Sie auf Bombasto. Beachten Sie das Bild lädt
4. klicken Sie auf Mr. Nice (kein Bild). Beachten Sie, dass es jetzt kein Bild gibt (obwohl dies der Held 11 ist und wir vorher einen Spinner hatten).

Answer 1

Das Thema ist nicht den Wert der Box Suchbegriffs zu speichern, ist es nur emittiert, was auch immer der aktuelle Wert von

<input #searchBox> 

jedes Mal gibt es ein keyup Ereignis ist. Ein Subject speichert den Wert der letzten Emission überhaupt nicht. Wenn Sie also das Suchfeld löschen möchten, müssen Sie den Wert des Eingabefeldes auf '' setzen. z.B. in Ihrer Komponente Helden suchen die folgende Eigenschaft

@ViewChild('searchBox') searchBox: ElementRef; 

dann in der gotoDetail Methode hinzufügen:

gotoDetail(hero: Hero): void { 
    this.searchBox.nativeElement.value = ''; 
    let link = ['/detail', hero.id]; 
    this.router.navigate(link); 
} 

Mit einem Thema für dies zu tun dies nicht der empfohlene Weg ist, aber ok für den Anfang. Ein besserer Weg ist, ein Observable direkt aus dem keyup -Ereignis auf dem DOM-Element zu erstellen - es gibt ein Beispiel für diesen Ansatz hier - https://github.com/Reactive-Extensions/RxJS/blob/master/examples/autocomplete/autocomplete.js