5.6响应式编程

观察者模式

可观察对象->观察者:调用
观察者->可观察对象:注册

Rxjs编程模型

var subscription = Observable.from([1, 2, 3, 4])
      .filter(e => e % 2 == 0)
      .map(e => e * e)
      .subscribe(
        e => console.log(e),
        error => console.error(error),
        () => console.log('结束了')
      );

模型解析

• 可观察对象Observable（流）：表示一组值或者事件的集合

• 观察者Observer：一个回掉函数的集合，包括成功时返回值、error时返回值、完成时放回值

• 订阅Subsciption：表示一个可观察对象，主要用于取消注册。subscription.unsubscribe()

• 操作符Operators：纯粹的函数，使开发者可以以函数编程的方式处理集合。

响应式编程 异步数据流编程。在响应式编程中你可以创建所有事务的数据流，流无处不在。例如变量、用户输入、事件、属性、缓存、数据结构在响应式编程中都能是流。

1. 创建流

2. 通过集合创建流

   Observable.from([1,2,3,4])
   Observable.from(集合)

3. 通过事件创建流

     var button=document.querySelector('button');
     Observable.fromEvent(button,'click')

4. 组合过滤

    filter(e => e % 2 == 0)

5. 流转换

    map(e => e * e)

实战：将集合[1,2,3,4]转变为一个流，过滤出集合中的偶数，并将偶数的平方输出到控制台

Observable.from([1, 2, 3, 4])
    .filter(e => e % 2 == 0)
    .map(e => e * e)
    .subscribe(
      e => console.log(e),
      err => console.error(err),
      () => console.log('结束了')
);

使用响应式编程做事件处理 实战： 模板代码

<input [formControl]="searchInput">

控制器代码

  searchInput: FormControl = new FormControl();

  constructor() {
    this.searchInput.valueChanges
      .debounceTime(500)
      .subscribe(stockCode => this.getStockCode(stockCode));
  }

  getStockCode(value: string) {
    console.log(value);
  }

FormControl对象，每一个表单元素都会默认有一个FormControl。 使用FormControl时需要引入ReactiveFormsModule angular中把事件当作永不结束的流来处理,如valueChange事件组成一个可订阅的流

模板本地变量：使用#模板本地变量来代表标签元素。如#myfield代表input标签

<input #myfield (key)="onKey(myfield.value)">