概念
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)
)
}