rxjs件名 - クリア？

Question

私はTour of Heroesチュートリアルを実行して少し変更しました。検索フィールドをナビゲーションバーに移動しました。検索では、そのドロップダウンサーチん：グループ内liのいずれかに

クリックすると、各英雄の詳細ページに移動します。私が抱えている問題は、ナビゲーションが検索用語をクリアしないということです。これは私の現在の関数である：

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); 
    } 

私の考えは、このような方法が存在していた場合、私はthis.searchTerms.clear()を呼ぶということでしたが、私はrxjs対象とあまり慣れていないんです。私もそれを再初期化できます。

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

が、これは新しいオブジェクトに私が検索するたびに作成していないでしょうか？これを解決する最善の方法は何ですか？

さらに、このナビゲートが機能しているかどうかはわかりません。この方法でナビゲートすると、サブコンポーネントにある@Input()を使用していないようです。

編集：問題を見るためにherokuに配備されています。複製するには：

• ノートスピニングSVG：

  1. は英雄11の '英雄の詳細' のページにアクセスしてください。これはスピナーimgコンポーネントです。 imgが見つからない（または読み込まれている）場合、デフォルトではスピナーimgになります。 OnLoadはイメージを実際のイメージに変更します。ヒーロー11には画像がないので、スピナーはそのままです（希望の効果）。

navの検索バーに「m」と入力します。

Bombastoをクリックします。写真のロードに注意してください。

Mr. Nice（no pic）をクリックしてください。画像がないことに注意してください（これはヒーロー11ですが、以前はスピナーを持っていました）。

Answer 1

件名はそれだけで

<input #searchBox> 

の現在値がkeyUpイベントがあるたびにあるものは何でも放出され、検索語ボックスの値を格納していません。件名には最後のエミッションの値はまったく格納されていないので、検索ボックスをクリアする場合は、入力ボックスの値を ''に設定します。例えば。あなたのヒーローの検索コンポーネントにgotoDetailメソッドで次のプロパティ

@ViewChild('searchBox') searchBox: ElementRef; 

を追加します。

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

これは、これを行うための推奨方法ではありませんが、初心者のためのOKの件名を使用します。より良い方法は、DOM要素のkeyupイベントからObservableダイレクトを作成することです。ここにこのアプローチの例があります。https://github.com/Reactive-Extensions/RxJS/blob/master/examples/autocomplete/autocomplete.js