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。