Я пытаюсь следовать примеру кода в Angular "Tour-of-Heroes-Tutorial", в частности, в разделе о настройке реализации для функции поиска.
Насколько я понимаю, функция pipe () RxJS возвращает цепочку функций, которые при запуске будут выполняться.В приведенном ниже случае функция pipe () находится в ngOnInit (в hero-search.component.ts) и возвращает функции, которые при выполнении возвращают Observables.Таким образом, heroes$ Observable (в hero-search.component.html и hero-search.component.ts) будет содержать функции, которые при срабатывании возвращают Hero (s) Observable (s).Что я не понимаю, так это: когда именно сработают функции в heroes$?Другими словами, что такое прослушиватель событий в этом случае и где этот слушатель связан с heroes$?
Я вижу следующее:
1. Вход в hero-search.component.html привязан к методу search() в HeroSearchComponent.
2. Метод search() выдвигает новый поисковый терминв объект searchTerms (наблюдаемый поток).
Как именно все это находит путь к heroes$ и вызывает выполнение функций в heroes$?
Заранее большое спасибо!
(hero-search.component.ts)
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)),
);
}
}
(hero-search.component.html)
<div id="search-component">
<h4>Hero Search</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>
(из hero.service.ts)
searchHeroes(term: string): Observable<Hero[]>{
if (!term.trim()) {
return of([]);
}
return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
tap(_ => this.log(`found heroes matching "${term}"`)),
catchError(this.handleError<Hero[]>('searchHeroes',[]))
);
}
}