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。