Angular4--数据绑定、响应式编程

概念

Angular中的数据绑定指的是同一组件中控制器文件（.ts）与视图（.html）之间的数据传递。

分类

单向绑定

ts->html

 <div> <img src="{{imgUrl}}"> <img [src]="imgUrl"> </div> 

html->ts

<input (keyup)="press($event)"> 

小结：ts->html使用插值表达式{{value}}或[attr],html->ts使用(event)。ts->html较为常用。

双向绑定

ts文件与html文件中绑定的值同时改变。

下列代码表示当HTML文件输入框内容改变时，ts文件的属性name的值同时改变。

<input [(ngModue)]='name'>{{name}} 

它的作用等于：

html <input [value]="name" (input)="doOnInput($event)"> ts doOnInput(event: any) { this.name = event.target.value; } 

响应式编程

响应式编程其实就是异步数据流编程观察者模式与Rxjs

可观察对象Observable(流):表示一组值或者事件的集合.

观察者Observer:一个回调函数集合，它知道怎样去监听被Observable发送的值。

订阅Subscription:表示一个可观察对象,主要用于取消订阅

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

constructor(){ Observable.from([1,2,3,4]) .filter( e => e%2 == 0) .map( e => e*e ) .subscribe( e => console.log(e) ) }