根据用户键盘对的输入,向远端服务器发送请求并返回数据,即:常见的搜索功能
<input type="text" #searchSource placeholder="请输入搜索的内容"(keyup)='search(searchSource.value)'>
在搜索时:input控件的(keyup)
事件绑定把每次击键都发送给了组件的 search()
方法。
如果每次击键都发送一次请求就太昂贵了。 最好是能等到用户停止输入时才发送请求。此时就可以用到请求防抖(使用 RxJS 的操作符实现)。
1. 引入相关的包
import {Subject} from 'rxjs/Subject';
2.声明变量
private searchTerms = new Subject<string>();
3.serach方法
search(serachParam: string) {
this.searchTerms.next(serachParam);
}
4.请求防抖
ngOnInit(): void {
this.searchTerms
.pipe(
// 请求防抖 300毫秒
debounceTime(300),
distinctUntilChanged())
.subscribe(term => {
// 此处进行httpClient的请求
// term是用户输入的值
});
}
searchTerms 是一个序列,包含用户输入到搜索框中的所有值。 它定义成了 RxJS 的 Subject
对象,这表示它是一个多播 Observable
,同时还可以自行调用 next(value)
来产生值,除了把每个 searchText
的值都直接转发给 httpClient
之外
ngOnInit()
中的代码还通过下列两个操作符对这些搜索值进行管道处理:
-
debounceTime(300)
- 等待,直到用户停止输入(这个例子中是停止 300ms)。 -
distinctUntilChanged()
- 等待,直到搜索内容发生了变化。
这样,只有当用户停止了输入且搜索值和以前不一样的时候,搜索值才会传给服务,发送请求。