[Angular] Binding syntax

前言

要從class將資料繫結到template上面，Angular有四種方式。

• 內嵌繫結 ( Interpolation )
• 屬性繫結 ( Property Binding )
• 事件繫結 ( Event Binding )
• 雙向繫結 ( Two-way Binding )

Interpolation

此種資料繫結方式是屬於單向繫結，使用方法如下

Interpolation

• html
• ts

<h1>
  {{title}}
</h1>

export class AppComponent {
  title = 'app works!';
}

Property Binding

這也是屬於單向繫結，只要是Html內建的tag都可以使用這種繫結方式。這個功能非常強大，還能用在Component之間的傳值。

Property Binding

• html
• ts

<a [href]="googleLink">Google Link</a>

export class AppComponent {
   googleLink = 'http://www.google.com';
}

Event Binding

只要是瀏覽器預設的所有事件，都可以用這樣的方式綁定，而且每個一個綁定的事件，都會有特定的型別，例如範例的click事件傳入的是 MouseEvent 型別。 button綁定的 (click) = "MyClick($event) MyClick傳入的一定是 $event。

Event Binding

• html
• ts

<button (click) = "MyClick($event)">Click</button>

export class AppComponent {

  MyClick(evt:MouseEvent) : void
  {
    console.log(evt);//如果當下不知道型別，可用這種方式檢查型別
    console.log("Hello");
  }
}

Two-way Binding

此種方式為雙向繫結，通常是用在input或select的原件上，讓使用者輸入的值可以傳回到class的property。 不過此種方式很浪費效能，建議斟酌使用，或者是改用事件的方式來完成類似的功能。

至於用法就是使用 [(ngModel)] 就可以了。

Two-way Binding

• html
• ts

<input [(ngModel)]="filter">

export class AppComponent {
  filter : string = '';
}

參考

Binding syntax