1. RxJS 的基本概念
RxJS 是一个基于观察者模式的响应式编程库。它将异步的数据流抽象为 Observable 对象，通过声明式的方式处理异步数据流。在 Angular2 中，RxJS 被广泛应用于各种场景，如发起 HTTP 请求、处理表单、处理路由等。
1.1 Observable 对象
Observable 对象是 RxJS 的核心概念，它可以被订阅以获得对数据流的访问。一个 Observable 可以对某个事件或值进行观察，并在值或事件改变时发出通知。
// javascriptcn.com 代码示例
import { Observable } from 'rxjs/Observable';
// 创建一个简单的 Observable
const myObservable = new Observable(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
// 订阅该 Observable 并获取数据
myObservable.subscribe(value => console.log(value));
// 输出：1
// 输出：2
// 输出：31.2 操作符
RxJS 提供了丰富的操作符以方便处理数据流。常用的操作符包括 map、filter、scan、switchMap 等。
// javascriptcn.com 代码示例
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
const myObservable = new Observable(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
// 使用 map 操作符进行数据转换
myObservable.map(value => value * 2).subscribe(value => console.log(value));
// 输出：2
// 输出：4
// 输出：62. 在 Angular2 中使用 RxJS
RxJS 被广泛应用于 Angular2 的各个方面，如组件间通信、Http 请求、表单操作等。以下是一些常见场景。
2.1 组件间通信
通过在组件间建立一个观察者和订阅者的关系，可以实现组件间的通信。在这个场景下，建议使用 Subject 对象。Subject 是一个特殊的 Observable，它可以被多个订阅者同时订阅，当 Subject 发出新值时，所有订阅者都会收到通知。
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Component({
selector: 'app-parent',
template: `
<app-child [text]="message" (onTextChange)="textChanged($event)"></app-child>
`
})
export class ParentComponent {
message = '';
messageSubject = new Subject();
textChanged(newText: string) {
this.message = newText;
this.messageSubject.next(newText);
}
}
@Component({
selector: 'app-child',
template: `
<input type="text" [value]="text" (keyup)="textChanged($event.target.value)">
`
})
export class ChildComponent {
@Input() text = '';
@Output() onTextChange = new EventEmitter<string>();
textChanged(newText: string) {
this.text = newText;
this.onTextChange.emit(newText);
}
}2.2 处理 Http 请求
Angular2 的 HttpModule 与 RxJS 集成得很好，可以直接使用 RxJS 的操作符来处理 Http 请求。常用的操作符包括 map、catch 等。通过 Http 请求，我们可以获取异步的数据流并将其转化为 Angular2 中的对象。
// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
template: `
<div>{{ user?.name }}</div>
<div>{{ user?.email }}</div>
`
})
export class AppComponent implements OnInit {
user: any;
constructor(private http: Http) {}
ngOnInit() {
this.http.get('/api/user/1')
.map(response => response.json())
.subscribe(user => this.user = user);
}
}2.3 表单操作
RxJS 可以轻松处理复杂的表单场景，如表单验证、同步表单值等。建议使用 FormControl、FormGroup 等 Angular2 的内置表单实现。可以使用 RxJS 的 debounceTime、distinctUntilChanged 等操作符来控制表单事件的频率。
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
@Component({
selector: 'app-root',
template: `
<form [formGroup]="form">
<input formControlName="email" type="email" />
</form>
`
})
export class AppComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = fb.group({
email: ['', Validators.required]
});
this.form.controls.email.valueChanges
.debounceTime(300)
.distinctUntilChanged()
.subscribe(email => this.validateEmail(email));
}
validateEmail(email: string) {
// ...
}
}3. 总结
RxJS 作为一个响应式编程库，可以方便地处理异步数据流。在 Angular2 中，RxJS 被广泛应用于各种场景，如组件间通信、Http 请求、表单等。熟练掌握 RxJS，可以提高 Angular2 的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65407abb7d4982a6eb9fd0e5