大佬教程收集整理的这篇文章主要介绍了angular4学习记录 -- 数据绑定、响应式编程、管道,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
基本Html属性绑定
<td [attr.colspan]="tableColspan">Something</td>
css类绑定
<div class="aa bb" [class]="someExpression">something</div> <div [class.special]="isSpecial">something</div> <div [ngClass]="{aaa:isA,bbb:isB}">something</div>
样式绑定
<button [style.color]="isSpecial?'red':'blue'>Red</button> <div [ngStyle]="{'font-style':this.canSave?'italic':'normal'}"></div>
4.双向绑定
<input [(ngModue)]='name'>{{name}}
响应式编程 其实就是异步数据流编程观察者模式与Rxjs
可观察对象Observable(stream,数据生产者,可观察对象,被观察者):表示一组值或者事件的集合.
在可观察对象发射数据(流)并经过操作符操作后,接着就可以通过订阅(subscribe)这个数据(流)然后激活之前注册的Observable(观察者,一组回调的集合)的回调函数拿到最终结果(完成观察者对可观察对象的订阅)
订阅Subscription:表示一个可观察对象,主要用于取消订阅
具体实例实现:
constructor(){ Observable.from([1,2,3,4]) .filter( e => e%2 == 0) .map( e => e*e ) .subscribe( e => console.log(e) ) } // debounce是空闲时间的间隔控制
<p>The hero's birthday is {{ birthday | date }}</p> // birthday | date 部分的date就是一个实例管道
The chained hero's birthday is {{ birthday | date | uppercase}} //链式管道就是在变量后面链接多个pipe
{{ birthday | date: *FullDate* }}
@Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number,exponent: string): number { let exp = parseFloat(exponent); return Math.pow(value,isNaN(exp) ? 1 : exp); } }
值变化或者对象引用发生变化的时候,才会执行管道。
速度超慢,深度检测,会频繁检测。pure设为false。
以上是大佬教程为你收集整理的angular4学习记录 -- 数据绑定、响应式编程、管道全部内容,希望文章能够帮你解决angular4学习记录 -- 数据绑定、响应式编程、管道所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。