angular input_给Angular应用增添搜索Search功能-CSDN博客

(1) dashboard Component里增添搜索Component的selector：<app-hero-search>app-hero-search>

使用命令行创建hero search Component：

> ng generate component hero-search

(2) 实现这个search Component的ui：

`Hero Search`

{{hero.name}}

注意第七行：

> 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;  private searchTerms = new Subject();  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进行搜索。

实现效果：点击搜索结果：