(1) dashboard Component里增添搜索Component的selector:
使用命令行创建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
这里的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请求,因此此处引入一个限流机制:
取消和丢弃之前生成的observable,而使用当前最新的observable进行搜索。
实现效果:点击搜索结果:
能够跳转到detail page: