一、常見的搜索功能
<input nz-input [(ngModel)]="paramsChannelVo.name" (keyup)="getData(paramsChannelVo.name)" placeholder="系統名稱" />
input的keyup事件把每次按鍵彈起都發送給了 getData() 方法，
這樣一個系結就造成了，每輸入一個字符就會進行一次搜索，如果使用中文輸入法，最后回車寫入中文時，又有可能造成不會進行搜索
所以最好是能等到用戶停止輸入時才發送請求，此時就可以用到請求防抖（使用 RxJS 的運算子實作），
二、如何使用防抖功能
1、component.js中引入rxjs/Subject
import {Subject} from 'rxjs/Subject';
import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
2、宣告變數
private getDataTerms = new Subject<string>();
這個string通常是[(ngModel)]系結的值的型別
3、keyup系結的getData方法
getData(value: string) {
this.getDataTerms.next(value);
}
4、請求防抖
ngOnInit(): void {
this.getDataTerms
.pipe(
// 請求防抖 300毫秒
debounceTime(300),
distinctUntilChanged())
.subscribe(term => {
// 此處進行httpClient的請求
// term是用戶輸入的值
this.getDataList();
});
}
getDataList(){
// 此處進行httpClient的請求
}
5、說明
ngOnInit() 中的代碼還通過下列兩個運算子對這些搜索值進行管道處理：
-
debounceTime(300) - 等待，直到用戶停止輸入（這個例子中是停止 300ms），
-
distinctUntilChanged() - 等待，直到搜索內容發生了變化，
getDataTerms 是一個序列，包含用戶輸入到搜索框中的所有值， 它定義成了 RxJS 的 Subject 物件，這表示它是一個多播 Observable，同時還可以自行呼叫 next(value) 來產生值
這樣，只有當用戶停止了輸入且搜索值和以前不一樣的時候，搜索值才會傳給服務，發送請求，避免每次輸入字符都進行 httpClient請求
三、將防抖功能定義為一個指令
未完待續，，，
個人博客 蝸牛
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/116756.html
標籤：Java