Angular4 第五章 响应式编程

1.观察者模式与Rxjs

（1）可观察对象，在初始化时注册观察者对象

（2）观察者，在可观察对象发生变化调用观察者的方法做相应的处理

import {Observable} from "rxjs";  //javascript的响应式编程包，angular框架依赖于它
var subscription=Observable.from([1,2,3,4])  //创建流，就是可观察对象，也叫被观察者
.filter((e)=>e%2==0)  //过滤流里面的元素
.map((e)=>e*e)        //映射流元素
.subscribe(            //订阅流，观察者
  e=>conlose.log(e),   //处理流中的元素
  error=>console.log(error), //处理流中的异常
  ()=>console.log("结束啦")  
)；

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

（2）观察者Observer:一个回调函数的集合，他知道怎样去接听被Observable发送的值

（3）订阅Subscription:表示一个可观察对象

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

响应式编程就是异步数据流编程。

如何用响应式编程来做浏览器事件处理

（1）标准的DOM事件

（2）自定义事件

2.模板本地变量，用#来声明模板本地变量，使用时不需要#

//myField就是指input标签，下面二者一样

3.使用流来处理事件

例如搜索股票的信息

     （1）引入新的模块，响应式编程模块ReactiveFormsModule，这个模块提供了一个对象FormControl,是angular用来表单处理时常用的一个类，用来代表表单元素，每一个表单元素都有一个对应的FormControl对象，默认情况，当表单元素值发生变化的时候，FormControl就会发生ValueChange事件，这些事件组成一个可订阅的流。

import{ReactiveFormsModule} from '@angular/forms';

imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

（2）

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { FormControl } from '@angular/forms';
import 'rxjs/Rx';
@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
  //声明变量searchInput
 searchInput:FormControl=new FormControl();
  constructor() {
      this.searchInput.valueChanges //流，input的只改变事件流
      .debounceTime(500)
      .subscribe(stockCode=>this.getStockInfo(stockCode))
   
    
   }

  ngOnInit() {

  }

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

}

html:

用[formControl]="searchInput"将input和属性searchInput绑起来以后，每当input的值发生变化时，searchInput就会发射一个valuechange事件，我们要做的就是订阅这个事件