@H_502_2@概念
@H_502_2@Angular中的数据绑定指的是同一组件中控制器文件(.ts)与视图(.html)之间的数据传递。
@H_502_2@
@H_502_2@单向绑定
@H_502_2@ts->html
@H_502_2@ <div> <img src="{{imgUrl}}"> <img [src]="imgUrl"> </div>
@H_502_2@html->ts
@H_502_2@<input (keyup)="press($event)">
@H_502_2@小结:ts->html使用插值表达式{{value}}或[attr],html->ts使用(event)。ts->html较为常用。
@H_502_2@
@H_502_2@双向绑定
@H_502_2@ts文件与html文件中绑定的值同时改变。
@H_502_2@下列代码表示当HTML文件输入框内容改变时,ts文件的属性name的值同时改变。
@H_502_2@<input [(ngModue)]='name'>{{name}}
@H_502_2@它的作用等于:
@H_502_2@html <input [value]="name" (input)="doOnInput($event)"> ts doOnInput(event: any) { this.name = event.target.value; }
@H_502_2@响应式编程
@H_502_2@
@H_502_2@响应式编程其实就是异步数据流编程观察者模式与Rxjs
@H_502_2@可观察对象Observable(流):表示一组值或者事件的集合.
@H_502_2@观察者Observer:一个回调函数集合,它知道怎样去监听被Observable发送的值。
@H_502_2@订阅Subscription:表示一个可观察对象,主要用于取消订阅
@H_502_2@操作符Operators:纯粹的函数,使开发者可以以函数编程的方式处理集合。
@H_502_2@
@H_502_2@constructor(){ Observable.from([1,2,3,4]) .filter( e => e%2 == 0) .map( e => e*e ) .subscribe( e => console.log(e) ) }