概念

Angular中的資料繫結指的是同一組件中控制器檔案（.ts）與檢視（.html）之間的資料傳遞。

分類

 單向繫結

ts->html

    <div>
      <img src="{{imgUrl}}">
      <img [src]="imgUrl">
    </div>

html->ts

<input (keyup)="press($event)">

小結：ts->html使用插值表示式{{value}}或[attr],html->ts使用(event)。ts->html較為常用。

雙向繫結

ts檔案與html檔案中繫結的值同時改變。

下列程式碼表示當HTML檔案輸入框內容改變時，ts檔案的屬性name的值同時改變。

<input [(ngModue)]='name'>{{name}}

它的作用等於：

html
    <input [value]="name" (input)="doOnInput($event)">
ts
  doOnInput(event: any) {
    this.name = event.target.value;
  }

響應式程式設計

響應式程式設計其實就是非同步資料流程式設計觀察者模式與Rxjs

可觀察物件Observable(流):表示一組值或者事件的集合.

觀察者Observer:一個回撥函式集合，它知道怎樣去監聽被Observable傳送的值。

訂閱Subscription:表示一個可觀察物件,主要用於取消訂閱

操作符Operators:純粹的函式，使開發者可以以函式程式設計的方式處理集合。

constructor(){
    Observable.from([1,2,3,4])
        .filter( e => e%2 == 0)
        .map( e => e*e )
        .subscribe(
            e => console.log(e)
        )
}