Angular搜索場景中使用rxjs的操作符處理思路

來源：懂視網責編：小采時間：2020-11-27 22:13:45

Angular搜索場景中使用rxjs的操作符處理思路

Angular搜索場景中使用rxjs的操作符處理思路:在有input輸入框的搜索/過濾業務中，總會考慮如何減少發起請求頻率，盡量使每次的請求都是有效的。節流和防抖是比較常見的做法，這類函數的實現方式也不難，不過終歸還是需要自己封裝。rxjs提供了各種操作符，可以很快捷高效的實現這些功能。栗子現在

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular搜索場景中使用rxjs的操作符處理思路:在有input輸入框的搜索/過濾業務中，總會考慮如何減少發起請求頻率，盡量使每次的請求都是有效的。節流和防抖是比較常見的做法，這類函數的實現方式也不難，不過終歸還是需要自己封裝。rxjs提供了各種操作符，可以很快捷高效的實現這些功能。栗子現在

在有input輸入框的搜索/過濾業務中，總會考慮如何減少發起請求頻率，盡量使每次的請求都是有效的。節流和防抖是比較常見的做法，這類函數的實現方式也不難，不過終歸還是需要自己封裝。rxjs提供了各種操作符，可以很快捷高效的實現這些功能。

栗子

　　現在有一個查詢場景，可以通過城市、類型、關鍵字來多維度過濾結果，如下圖：

　　處理思路：

　　　　1、通過ngModel將select和input的值綁定到模型中的過濾條件對象

　　　　2、監聽select輸入框的change事件和input輸入框的input事件來觸發發送過濾條件的函數

　　　　3、創建一個用于發送過濾條件的Subject，再通過操作符來進行防抖動、前后值的對比等處理，訂閱此主體，有有效的過濾條件過來時才發送請求，拉取數據。

　　值綁定和事件監聽：

<select name="city" id="city" [(ngModel)] = "config.cityCode" (change)="filterList()">
 <option [value]="city.value" *ngFor="let city of citylist" >{{city.name}}</option>
 </select>
 <select name="type" id="type" [(ngModel)] = "config.areaType" (change)="filterList()">
 <option value="">全部</option>
 <option value="TRAFFIC">交通</option>
 <option value="TRAVEL">旅游</option>
 </select>
 <input type="text" class="search" id="search" 
 [(ngModel)] = "config.name" 
 (input)="filterList()"
 placeholder="請輸入關鍵字">

這里為什么input不監聽change事件呢？ type=text類型的input在失焦的時候才會觸發change事件，而input事件則只要value變化就會觸發（這里沒有考慮IE兼容性問題）

　　處理函數：

 // 用于傳遞配置項
 public $filter = new Subject<any>();
 // 過濾條件
 public config: FilterConfig = {
 cityCode : '',
 areaType : '',
 name : ''
 };
 ngOnInit() {
 // 監聽過濾配置項
 this.$filter.pipe(
 debounceTime(500),
 distinctUntilChanged( (n: FilterConfig , o: FilterConfig): boolean => {
 return n.name === o.name &&
 n.cityCode === o.cityCode &&
 n.areaType === o.areaType;
 })
 ).subscribe( _config => {
 this.getRegionList(_config);
 });
 }
 filterList() {
 // 每次都要發送一個新的對象，否則distinctUntilChanged compare的時候會一直比較同一個對象的值
 this.$filter.next(Object.assign({}, this.config));
 }
 getRegionList (_config) {
 // 發送請求，更新區域數據
 console.log(_config);
 }

　　需要注意的是，$filter傳遞過濾條件的時候，一定要發送一個新的對象，否則 distinctUntilChanged 的 compare 函數由于比較的是同一個對象，會一直認為沒有變化，導致不會繼續傳播。因為config對象的value都是string簡單類型，所以可以直接用Object.assign，如果value值是對象類型的話，就需要自己擼個簡單的深拷貝工具函數了

總結

　　主要的思路就是通過Subject來發送過濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。而在比較對象的時候需要自定義distinctUntilChanged 操作符的compare函數，這時需要注意不要傳遞同一個對象。

總結

以上所述是小編給大家介紹的Angular搜索場景中使用rxjs的操作符處理思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com