(1) dashboard Component裡增添搜尋Component的selector：<app-hero-search></app-hero-search>

使用命令列建立hero search Component：

> ng generate component hero-search

(2) 實現這個search Component的ui：

<div id="search-component"> <h4><label for="search-box">Hero Search</label></h4>  <input #searchBox id="search-box" (input)="search(searchBox.value)" />  <ul class="search-result"> <li *ngFor="let hero of heroes$ | async" > <a routerLink="/detail/{{hero.id}}"> {{hero.name}} </a> </li> </ul> </div>

注意第七行：

> Notice that the *ngFor iterates over a list called heroes$, not heroes. The $ is a convention that indicates heroes$ is an Observable, not an array.

這裡的heroes$不是一個數組，而是一個Observable.

> Since *ngFor can't do anything with an Observable, use the pipe character (|) followed by async. This identifies Angular's AsyncPipe and subscribes to an Observable automatically so you won't have to do so in the component class.

因為指令*ngFor不能直接同Observable打交道，因此使用管道| 和AsyncPipe.

(3) 實現search Component：

import { Component, OnInit } from '@angular/core';import { Observable, Subject } from 'rxjs';import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';import { Hero } from '../hero';import { HeroService } from '../hero.service';@Component({ selector: 'app-hero-search', templateUrl: './hero-search.component.html', styleUrls: [ './hero-search.component.css' ]})export class HeroSearchComponent implements OnInit { heroes$: Observable<Hero[]>; private searchTerms = new Subject<string>(); constructor(private heroService: HeroService) {} // Push a search term into the observable stream. search(term: string): void { this.searchTerms.next(term); } ngOnInit(): void { this.heroes$ = this.searchTerms.pipe( // wait 300ms after each keystroke before considering the term debounceTime(300), // ignore new term if same as previous term distinctUntilChanged(), // switch to new search observable each time the term changes switchMap((term: string) => this.heroService.searchHeroes(term)), ); }}

要點分析：

第19行的searchTerms來自庫rxjs的Subject物件：

> A Subject is both a source of observable values and an Observable itself. You can subscribe to a Subject as you would any Observable.

> You can also push values into that Observable by calling its next(value) method as the search() method does.

將使用者輸入的term字串變數放入searchTerms這個observable stream中。

如果每次使用者輸入的input事件都導致search函式執行的話，將會產生大量的HTTP請求，因此此處引入一個限流機制：

* debounceTime(300): waits until the flow of new string events pauses for 300 milliseconds before passing along the latest string. You'll never make requests more frequently than 300ms. 新的input事件在300毫秒之後才會觸發。

* distinctUntilChanged():ensures that a request is sent only if the filter text changed - 只有當輸入發生變化時才觸發事件

* switchMap() calls the search service for each search term that makes it through debounce() and distinctUntilChanged(). It cancels and discards previous search observables, returning only the latest search service observable.

取消和丟棄之前生成的observable，而使用當前最新的observable進行搜尋。

能夠跳轉到detail page：