這篇文章主要為大家展示了“Angular搜索場(chǎng)景中如何使用rxjs的操作符處理”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular搜索場(chǎng)景中如何使用rxjs的操作符處理”這篇文章吧。

創(chuàng)新互聯(lián)IDC提供業(yè)務(wù):服務(wù)器主機(jī)托管,成都服務(wù)器租用,服務(wù)器主機(jī)托管,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動(dòng)機(jī)房,聯(lián)通機(jī)房。

栗子

　　現(xiàn)在有一個(gè)查詢場(chǎng)景，可以通過城市、類型、關(guān)鍵字來多維度過濾結(jié)果，如下圖：

處理思路：

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

　　　　2、監(jiān)聽select輸入框的change事件和input輸入框的input事件來觸發(fā) 發(fā)送過濾條件的函數(shù)

　　　　3、創(chuàng)建一個(gè)用于發(fā)送過濾條件的Subject，再通過操作符來進(jìn)行防抖動(dòng)、前后值的對(duì)比等處理，訂閱此主體，有有效的過濾條件過來時(shí)才發(fā)送請(qǐng)求，拉取數(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="請(qǐng)輸入關(guān)鍵字">

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

　　處理函數(shù) ：

 // 用于傳遞配置項(xiàng)
 public $filter = new Subject<any>();
 // 過濾條件
 public config: FilterConfig = {
 cityCode : '',
 areaType : '',
 name : ''
 };
 ngOnInit() {
 // 監(jiān)聽過濾配置項(xiàng)
 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ā)送一個(gè)新的對(duì)象，否則distinctUntilChanged compare的時(shí)候會(huì)一直比較同一個(gè)對(duì)象的值
 this.$filter.next(Object.assign({}, this.config));
 }
 getRegionList (_config) {
 // 發(fā)送請(qǐng)求，更新區(qū)域數(shù)據(jù)
 console.log(_config);
 }

　　需要注意的是，$filter傳遞過濾條件的時(shí)候，一定要發(fā)送一個(gè)新的對(duì)象，否則 distinctUntilChanged 的 compare 函數(shù)由于比較的是同一個(gè)對(duì)象，會(huì)一直認(rèn)為沒有變化，導(dǎo)致不會(huì)繼續(xù)傳播。因?yàn)閏onfig對(duì)象的value都是string簡(jiǎn)單類型，所以可以直接用Object.assign，如果value值是對(duì)象類型的話，就需要自己擼個(gè)簡(jiǎn)單的深拷貝工具函數(shù)了

以上是“Angular搜索場(chǎng)景中如何使用rxjs的操作符處理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：Angular搜索場(chǎng)景中如何使用rxjs的操作符處理-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.chinadenli.net/article32/dpidsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、App設(shè)計(jì)、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)