04d5337b75
closes #2008 Changes: - Drop `asObservable()` since it is deprecated in RxJS 5 (see the [migration guide](https://github.com/ReactiveX/RxJS/blob/master/MIGRATION.md#operat ors-renamed-or-removed)). - Drop `+` from hero search query URL: `app/heroes/?name=${term}+`. At best it is interpreted as a regex op that serves no purpose, at worst, it gets interpreted as a space (cf. [HTML 4.01 section 17.13.4](https://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4) ). - Rename `searchSubject` to `searchTerms` - Other minor tweaks to prose. This work is in preparation for #1924. Note: toh-6 tests pass.
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
// #docplaster
|
|
// #docregion
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { Router } from '@angular/router';
|
|
import { Observable } from 'rxjs/Observable';
|
|
import { Subject } from 'rxjs/Subject';
|
|
|
|
import { HeroSearchService } from './hero-search.service';
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
selector: 'hero-search',
|
|
templateUrl: 'app/hero-search.component.html',
|
|
providers: [HeroSearchService]
|
|
})
|
|
export class HeroSearchComponent implements OnInit {
|
|
// #docregion search
|
|
heroes: Observable<Hero[]>;
|
|
// #enddocregion search
|
|
// #docregion searchTerms
|
|
searchTerms = new Subject<string>();
|
|
// #enddocregion searchTerms
|
|
|
|
constructor(
|
|
private heroSearchService: HeroSearchService,
|
|
private router: Router) {}
|
|
// #docregion searchTerms
|
|
|
|
// Push a search term into the observable stream.
|
|
search(term: string) { this.searchTerms.next(term); }
|
|
// #enddocregion searchTerms
|
|
// #docregion search
|
|
|
|
ngOnInit() {
|
|
this.heroes = this.searchTerms
|
|
.debounceTime(300) // wait for 300ms pause in events
|
|
.distinctUntilChanged() // ignore if next search term is same as previous
|
|
.switchMap(term => term // switch to new observable each time
|
|
// return the http search observable
|
|
? this.heroSearchService.search(term)
|
|
// or the observable of empty heroes if no search term
|
|
: Observable.of<Hero[]>([]))
|
|
.catch(error => {
|
|
// TODO: real error handling
|
|
console.log(error);
|
|
return Observable.of<Hero[]>([]);
|
|
});
|
|
}
|
|
// #enddocregion search
|
|
|
|
gotoDetail(hero: Hero) {
|
|
let link = ['/detail', hero.id];
|
|
this.router.navigate(link);
|
|
}
|
|
}
|