RxJS实战 输入框值改变时自动

20190108182149.png

功能描述

在输入框中输入景点的名字，自动调用google地图接口查询地点的坐标。并将地图定位到该坐标。
跟RxJS相关的主要是输入名字，自动查询这个功能。
如果用户每次修改都提交一个查询请求，说不定google会因为过于频繁的请求把我们给屏蔽掉。

我们这里主要重点介绍RxJS的用法，其他功能代码（比如地图操作）就忽略掉。直接介绍核心的功能。

用到的操作符

filter 过滤掉可能产生异常的值。
debounceTime 在用户没有停止输入前，不进行坐标查询。
switchMap 只保留最后一次请求的结果，在网速慢的情况下避免多次查询的结果互相干扰，地图跳来跳去。

不过遇到一个问题，就是input的valuechange事件绑定问题。
这里只有一个输入框，觉得没必要搞formGroup formControl这么重的东西进来。
这个时候，输入框的变化就没法直接获得Subject了。
只好自己创建一个：
TS 定义一个组件的属性

addressChangeS = new Subject<string>();

HTML

<input (ngModelChange)="addressChangeS.next($event)" [(ngModel)]="_address" class="input" nz-input nzType="'text'">

这样，文字一旦发生变化我们就可以抛出值了。
在初始化组件的时候，订阅这个Subject

ngOnInit(){
    this.addressChangeS
      .filter(address=>address!=="")
      .debounceTime(700)
      .switchMap(address=>{
        return this.geocoder.geocode({address:address});
    }).subscribe(res=>{
     //对获得的值进行处理。将地图中心定位到我们查询的坐标上
    })
   }

这里查询地址的接口已经直接是一个Observable了。我们就能无缝的跟我们的RxJS代码衔接上。感觉还不错。