Angular学习笔记-响应式编程（万物皆为流）

响应式编程是以观察者模式为核心的。

观察者模式与RxJs

我们在初始化可观察对象的时候，我们会向观察者对象注册一些观察者对象，当可观察对象里面发生变化时，就会调用观察者里面的一些方法，来把自己的变化告诉观察者，让观察者做一些相应的处理。这样的模式叫做观察者模式。
下面这段代码是典型的观察者模式代码，我们由此介绍一些关于RxJs的概念。

可观察对象Observable（流）:表示一组值或者事件的集合
观察者Observer：一个回调函数的集合，它知道怎么去监听被Obervable发送的值
订阅Subscription:表示一个可观察对象，主要用于取消注册
操作符Operators:纯粹的函数，使开发者可以以函数编程的方式处理集合

响应式编程概念

异步数据流编程，可以创建任何事件流。

demo

观察流（数组），选出偶数流，计算平方，打印出来

//app.module
import { FormsModule } from '@angular/forms';
imports: [
   FormsModule
]

//bind.component.ts
import { Observable } from '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("结束啦！")
)

流可以做以下操作

• 发射元素，类型取决于流源头，在这是一个number类型的数组
• 抛出异常
• 发射结束信号

对应的观察者也可以做出以下操作

• 处理流中发射的元素
• 处理流中的异常
• 流结束时调用函数

用响应式编程做事件处理

//html:
<input type="text" (keyup)="onKey($event)">//event对象拥有一组描述事件的属性
//ts:
onKey(event){
    console.log(event.target.value);
}

模板本地变量：event.target指向发射事件的HTML元素，而其实，在Angular模版中可以使用本地变量”#” 获得发射事件HTML元素

//html:
<input type="text" #myfile (keyup)="onKey(myfile.value)">
//ts:
onKey(value){
  console.log(value);
}

也就是 $event.target 可以用 #myfile来代替

做为一个Angular开发者，你要知道的就是将事件作为永不结束的流

demo2

FormControl，来自RectiveFormsModule（这个就是用来做响应式编程的），代表表单元素，表单元素改变时触发valueChange事件，组成可订阅流
使用FormControl时，需要在modlue同时导入FormsModule和ReactiveFormsModule从@angular/forms模块

写一个输入框，当输入文字暂停500毫秒时，会触发事件打印出输入的文字

//app.module.ts
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
imports: [
  FormsModule,
  ReactiveFormsModule
]
//html:
<input [formControl]="searchInput">
//[formControl] 表单指令
//searchInput 实例化的FormControl对象，其valueChange可组成订阅流

//ts:
import { FormControl } from '@angular/forms';
import 'rxjs/Rx';

searchInput:FormControl = new FormControl();
ngOnInit() {
    this.searchInput.valueChanges
        .debounceTime(500)
        .subscribe(
            e => this.getStock(e)
    )
}
getStock(value){
  console.log('查找:'+value);
}