angular4学习记录 -- 数据绑定、响应式编程、管道

前端之家收集整理的这篇文章主要介绍了angular4学习记录 -- 数据绑定、响应式编程、管道前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

angular4 数据绑定、响应式编程、管道

数据绑定

  1. 基本Html属性绑定

    <td [attr.colspan]="tableColspan">Something</td>
  2. css类绑定

    <div class="aa bb" [class]="someExpression">something</div>
         <div [class.special]="isSpecial">something</div>
         <div [ngClass]="{aaa:isA,bbb:isB}">something</div>
  3. 样式绑定

    <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是空闲时间的间隔控制

管道

  • 管道是一个带有“管道元数据(pipe Metadata)”装饰器的类。
  • 这个管道类实现了PipeTransform接口的transform方法,该方法接受一个输入值和一些可选参数,并返回转换后的值。
  • 当每个输入值被传给transform方法时,还会带上另一个参数,比如我们这个管道中的exponent(放大指数)。
  • 我们通过@Pipe装饰器告诉Angular:这是一个管道。该装饰器是从Angular的core库中引入的。
  • 这个@Pipe装饰器允许我们定义管道的名字,这个名字会被用在模板表达式中。它必须是一个有效的JavaScript标识符。 比如,我们这个管道的名字是exponentialStrength。

普通使用:

<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。

原文链接:https://www.f2er.com/angularjs/146050.html

猜你在找的Angularjs相关文章