响应式编程和管道

双向绑定

• 使用双向绑定文本框中的值始终和name值一致

 {{name}}

---

响应式编程

1. 观察者模式与rxjs，观察者注册可观察对象，可观察对象调用观察者，这是rxjs最简单的编程模型

constructor() {
  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("结束")
    );

}

2. 可观察对象Observable（流）：表示一组值或者事件的集合（1,2,3,4这四个值就是可观察对象）
   用一组事件（button的click事件）创造出一个可观察对象

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

3. rxjs编程模型

• 观察者Observer：一个回调函数的集合，他知道怎样监听被Observable发送的值（.subscribe方法的参数是三个函数组成的回调函数集合）
• 订阅Subscription：表示一个可观察对象，主要用于取消注册（例如关注的是一个按钮的点击事件，调用这个方法后，就不会去处理这个按钮的点击事件）

subscription.unsubscribe()

• 操作符Operators：纯粹的函数使开发者可以以函数编程的方式处理集合
• .filter这个方法就是过滤流中的所有元素，将这个流中的所有偶数过滤出来
• .map映射这个流，过滤了偶数以后取其平方
• .subscribe订阅这个流，这三个函数表示：将结果打印出来，出现错误时将错误打印出来，这个流结束时的操作，打印“结束”
• 流可以完成的事件：发射一个元素，抛出一个异常，发出流已经结束的信号

4. 在主模块中引入一个模块ReactiveFormsModule，这个模块是angular中做响应式编程的模块，提供了一个对象FormControl，是angular进行表单处理时使用的类，默认情况下,无论何时表单元素发生变化，FormControl就会发射一个valuechange事件，valuechange事件会组成一个可订阅的流

searchInput:FormControl = new FormControl();


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

5. . debounceTime方法可以使在500ms内输入框发生变化而并不会调用getStockInfo，可以模拟出搜索框的效果，在一段时间内搜索框内的数值发生变化时不会立即显示出搜索的结果

---

管道

1. 处理原始值到显示值的转换（类似vue的过滤器）

• 只显示月日年，字母大写

newdate:Date = new Date();

日期：{{newdate | date | uppercase }}

• 显示日期的年月日时分秒

日期：{{newdate | date:'yyyy-MM-dd HH:mm:ss'}}

• 小数点之前保留两位，小数点之后保留两位（2-2表示小数点后最多保留2位，最少保留1位，只有小数点位数小于最小保留位数是才会触发）

 圆周率{{pi | number:'2.1-2'}}

• 异步管道，用来解包一个异步的管道流（响应式编程中的流）

 圆周率{{pi | async}}

2. 自定义管道

ng g pipe /multiple

3. 管道和组件类似，都需要在模块中声明，管道实现了一个PipeTransform的接口，这个接口中只有一个方法transform，这个方法接收一个输入值，第一个参数是一个value是管道输入的原始值，args是一个可选参数（比如可以是date后面的字符串'yyyy-MM-dd HH:mm:ss'），这个方法根据传入的原始值和参数来转化这个原始值，将转换完的值返回回去
4. 自定义管道，如果args不存在（multiple后面不加上字符串‘2’）则默认值为1

 自定义管道{{pi | multiple:'2'}}

export class MultiplePipe implements PipeTransform {

  transform(value: number, args?: number): any {
    if(!args){
      args=1;
    }
    return value *args;
  }

}