利用Angular2的Observables实现交互控制的方法

import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';
@Injectable()
export class WikipediaService {
constructor(private jsonp: Jsonp) {}
search (term: string) {
var search = new URLSearchParams()
search.set('action', 'opensearch');
search.set('search', term);
search.set('format', 'json');
return this.jsonp
.get('http://en.wikipedia.org/w/api.php"htmlcode">

// check the plnkr for the full list of imports
import {...} from '...';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Wikipedia Search</h2>
<input #term type="text" (keyup)="search(term.value)">
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
</div>
`
})
export class AppComponent {
items: Array<string>;
constructor(private wikipediaService: WikipediaService) {}
search(term) {
this.wikipediaService.search(term).then(items => this.items = items);
}
}



从上面的代码也能看出，AppComponent有一个search()方法，它调用wikipediaService.search()方法，因为这个方法返回一个Promise<Array<string类型的结果，所以使用then()，把结果列表赋值给model对象items。上面的template里面的模板内容就是用来以列表显示查询的结果。
虽然这个实现满足了基本的查询功能，但是对于上面提到的3个问题，都没有能够解决。下面就来修改这个实现来解决上面的问题。
控制用户输入延时


我们先解决第一个问题：当用户输入的时候，不要每次输入一个字符就触发一次搜索，而是设置一个时间延时，当用户停止输入的时间超过400毫秒，就触发搜索。如果用户一直不停的输入，输入的时间间隔小于400ms就不触发。这正是'Observables'能做的事情。
为此，我们需要一个Observable<string>对象来保存用户的输入，然后就可以用这个对象提供的方法来实现延时触发的功能。我们可以利用Angular2的指令(directive)formControl。要用这个指令，需要引入ReactiveFormsModule模块。


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}



引入以后，我们就可以在模板里面使用FormControl来创建表单输入，并给他设置一个变量名term。


<input type="text" [formControl]="term"/>


这样，这个input组件所绑定的变量term就是FormControl的一个实例，它有一个属性valueChanges，这个属性是一个Observable<string>类型的对象。我们就可以使用Observable<string>的debounceTime方法来设置触发延时。


export class AppComponent {
items: Array<string>;
term = new FormControl();
constructor(private wikipediaService: WikipediaService) {
this.term.valueChanges
.debounceTime(400)
.subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
}
}


我们看到this.term.valueChanges是一个Observable<string>对象，通过debounceTime(400)我们设置它的事件触发延时是400毫秒。这个方法还是返回一个Observable<string>对象。然后我们就给这个对象添加一个订阅事件:




term => this.wikipediaService.search(term).then(items => this.items = items)


这是用lambda表达式写的一个方法。参数term就是Observable<string>对象经过400ms的延时设置，产生的一个用户输入的字符串。方法体就是用这个参数进行搜索，跟之前版本的处理方式一致。
在这个修改版中，我们把之前的search()方法去掉，直接在构造函数constructor(...)里面添加的，这相当于，用户在输入框的输入，是一个消息源，会经过debounceTime(400)的处理，然后产生一个消息，这个消息会发送给订阅的事件处理函数来处理，也就是搜索。所以，我们不需要一个search()方法来控制什么时候触发，而是通过类型订阅的机制来处理用户输入。
防止触发两次


现在我们再来解决第二个问题，就是经过400ms的延时以后，用户输入的搜索条件一样的情况。有了上面的Observable，这个就很简单了，Observable有一个distinctUntilChanged的方法，他会判断从消息源过来的新数据跟上次的数据是否一致，只有不一致才会触发订阅的方法。


this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));


处理返回顺序


上面描述了服务器端异步返回数据的时候，返回顺序不一致出现的问题。对于这个问题，我们的解决办法就比较直接，也就是对于之前的请求返回的结果，直接忽略，只处理在页面上用户最后一次发起的请求的结果。说道忽略之前的请求，如果你们看了上面的视频，或者知道Promise和Observable的区别的话，就应该想到我们可以利用Observable的dispose()方法来解决。实际上，我们是利用这种'disposable'特性来解决，而不是直接调用dispose()方法。（实在不知道该怎么翻译'disposable'，它的意思是我可以中止在Observable对象上的消息处理，字面的意思是可被丢弃的、一次性的。）
上面我们讲到，在service的search()方法里，我们把Jsonp返回的结果从Observable<Response> 转换成 Promise<Response>对象。为了利用Observable的特性去丢弃上一个未及时返回的结果，我们让这个方法还是返回Observable类型的结果。下面就是修改后的WikipediaService里面的search()方法。




search (term: string) {
var search = new URLSearchParams()
search.set('action', 'opensearch');
search.set('search', term);
search.set('format', 'json');
return this.jsonp
.get('http://en.wikipedia.org/w/api.php"htmlcode">

this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.subscribe(
term => this.wikipediaService.search(term).subscribe(
items => this.items = items
)
);



其中，第一个subscribe():


this.term.valueChanges...subscribe(term => ....)


这个是对输入框产生的查询字符串，注册一个订阅方法，来处理用户的输入。
第二个subscribe():




this.wikipediaService.search(term).subscribe(items => this.items = items));


是对从服务器端返回的数据查询结果，注册一个订阅方法，来将这个数据赋值到model上。
我们也可以用下面的方式，来避免这样使用多个subscribe：


this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.flatMap(term => this.wikipediaService.search(term))
.subscribe(items => this.items = items);


我们在用户输入的字符串的Observable<string>上调用flatMap(...)方法，相当于，对用户输入的每个有效的查询条件，调用wikipediaService.search()方法。然后对这个查询返回的数据，再注册一个订阅方法。
费了这么大的篇幅，希望你明白了Observable的flatMap和subscribe用法，对于没有接触过函数式编程的人来说，这确实不好理解，但是在Angular2里面，我们将会大量使用各种函数式编程的方法。所以还是需要你花时间慢慢理解。
费了这么大功夫，上面说的似乎跟'忽略之前未及时返回的消息'好像没什么关系，那么上面的修改到底有没有解决那个问题呢。没有！确实是没有。因为我们使用flatMap，对用户输入的每个有效的查询字符串，都会调用订阅的那个处理函数，然后更新model。所以我们的问题还是没有解决。
但是到了这一步以后，解决办法就很容易了，我们只需要用switchMap代理flatMap就可以。就这么简单！这是因为，switchMap会在处理每一个新的消息的时候，就直接把上一个消息注册的订阅方法直接取消掉。
最后，再优化一下代码：


@Component({
selector: 'my-app',
template: `
<div>
<h2>Wikipedia Search</h2>
<input type="text" [formControl]="term"/>
<ul>
<li *ngFor="let item of items | async">{{item}}</li>
</ul>
</div>
`
})
export class AppComponent {
items: Observable<Array<string;
term = new FormControl();
constructor(private wikipediaService: WikipediaService) {
this.items = this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.switchMap(term => this.wikipediaService.search(term));
}
}


我们直接把switchMap()的结果，赋给model对象this.items，也就是一个Observable<Array<string类型的数据。这样，在模板里面使用items的地方也需要修改，使用AsyncPipe就可以：


<li *ngFor="let item of items | async">{{item}}</li>


这样，模板在解析items这个model的时候，就会自动解析这个Observable的结果，再渲染页面。
Demo地址: Smart Wikipedia search using Angular 2


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。