Angular学习笔记（十一）之响应式编程基础

观察者模式概念

观察者模式以及在RXJS中对应的概念和代码样例

响应式编程概念

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

一个简单的响应式编程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)">
//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新思路：将事件作为永不结束的流
• FormControl，来自RectiveFormsModule，代表表单元素，表单元素改变时触发valueChange事件，组成可订阅流

写一个输入框，当输入文字暂停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);
}

Tips:使用FormControl时，需要在modlue同时导入FormsModule和ReactiveFormsModule从@angular/forms模块