angular4學習記錄 — 資料繫結、響應式程式設計、管道

navk發表於2019-02-16
Angular程式設計

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。

相關文章