Angular搜索場景中使用rxjs的操作符處理思路
在有input輸入框的搜索/過濾業(yè)務(wù)中，總會考慮如何減少發(fā)起請求頻率，盡量使每次的請求都是有效的。節(jié)流和防抖是比較常見的做法，這類函數(shù)的實現(xiàn)方式也不難，不過終歸還是需要自己封裝。rxjs提供了各種操作符 ， 可以很快捷高效的實現(xiàn)這些功能。
栗子
現(xiàn)在有一個查詢場景，可以通過城市、類型、關(guān)鍵字來多維度過濾結(jié)果，如下圖：
處理思路：
1、通過ngModel將select和input的值綁定到模型中的過濾條件對象
2、監(jiān)聽select輸入框的change事件和input輸入框的input事件來觸發(fā) 發(fā)送過濾條件的函數(shù)
3、創(chuàng)建一個用于發(fā)送過濾條件的Subject，再通過操作符來進行防抖動、前后值的對比等處理，訂閱此主體，有有效的過濾條件過來時才發(fā)送請求，拉取數(shù)據(jù)。
值綁定和事件監(jiān)聽：
<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="請輸入關(guān)鍵字">
這里為什么input不監(jiān)聽change事件呢？ type=text類型的input在失焦的時候才會觸發(fā)change事件，而input事件則只要value變化就會觸發(fā)（這里沒有考慮IE兼容性問題）
處理函數(shù) ：
// 用于傳遞配置項
public $filter = new Subject<any>();
// 過濾條件
public config: FilterConfig = {
cityCode : '',
areaType : '',
name : ''
};
ngOnInit() {
// 監(jiān)聽過濾配置項
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() {
// 每次都要發(fā)送一個新的對象，否則distinctUntilChanged compare的時候會一直比較同一個對象的值
this.$filter.next(Object.assign({}, this.config));
}
getRegionList (_config) {
// 發(fā)送請求，更新區(qū)域數(shù)據(jù)
console.log(_config);
}
需要注意的是，$filter傳遞過濾條件的時候，一定要發(fā)送一個新的對象，否則 distinctUntilChanged 的 compare 函數(shù)由于比較的是同一個對象，會一直認為沒有變化，導(dǎo)致不會繼續(xù)傳播。因為config對象的value都是string簡單類型，所以可以直接用Object.assign，如果value值是對象類型的話，就需要自己擼個簡單的深拷貝工具函數(shù)了
總結(jié)
主要的思路就是通過Subject來發(fā)送過濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。而在比較對象的時候需要自定義distinctUntilChanged 操作符的compare函數(shù)，這時需要注意不要傳遞同一個對象。
總結(jié)
以上所述是小編給大家介紹的Angular搜索場景中使用rxjs的操作符處理思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在客戶端使用AngularJS做身份驗證的話，推薦使用service來做，下面腳本之家小編給大家介紹AngularJS身份驗證的方法，感興趣的朋友一起學習吧2016-02-02
這篇文章主要介紹了AngularJS動態(tài)加載模塊和依賴的方法,結(jié)合實例形式分析了AngularJS使用ocLazyLoad實現(xiàn)動態(tài)加載的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
今天小編就為大家分享一篇Angularjs之ngModel中的值驗證綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
AngularJS實現(xiàn)的base64編碼與解碼功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的base64編碼與解碼功能,結(jié)合實例形式分析了AngularJS字符串base64編碼與解碼操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
Angular+ionic實現(xiàn)折疊展開效果的示例代碼
AngularJS動態(tài)生成select下拉框的方法實例
AngularJS基礎(chǔ) ng-copy 指令實例代碼