Angular屬性綁定(Property binding)的簡單範例。
Property binding的語法：
<input type="text" [value]="content" >
Property binding撰寫在HTML DOM元素中，例如<input>。等號=左側為綁定的目標元素屬性(target element property)；右側為綁定的Component屬性(component's property)。
「屬性(Property)」是指DOM物件的屬性(property)。
綁定的目標元素屬性放在方括弧[]中，例如上面綁定的元素屬性value。
除了方括弧，也可以用bind-前綴字來表示property binding，例如
<input type="text" bind-value="content" >
綁定的Component屬性用雙引號"夾起，例如上面value屬性綁定Component的content屬性值。
Property binding的作用為把Component的屬性值導向至綁定的HTML DOM元素屬性。注意property binding的資料是單向的，只固定由Component屬性流向DOM元素屬性，因此property binding無法用來讀取DOM元素的屬性值；Property binding也無法用來呼叫Component的方法，目標元素事件發生時呼叫方法應使用事件綁定(Event binding)處理。
在沒有前端框架如Angular以前是透過JavaScript爬取DOM物件並設定屬性值。
下面範例為Angular新建專案的app.component.html及app.component.ts。
修改app.component.html，把預設的內容刪除並更改為以下內容。
在app.component.html新增文字輸入欄位元素<input>並設定property binding將其value屬性與AppComponent.content的值進行綁定，所以欄位內容會顯示AppComponent.content的值。
在輸入欄位<input>設定event binding綁定input事件，事件發生時把事件物件 - $event（在此即為input事件）的value值設定到AppComponent.content。
新增一個按鈕<button>元素並設定event binding綁定click事件至AppComponent.onClick()函式。
app.component.html
<h1>{{title}}</h1>
<input type="text" [value]="content" (input)="content = $event.target.value">
<button (click)="onClick()">Click</button>
接著在app.component.ts的AppComponent類別新增一個content屬性及一個函式onClick()。
onClick()會呼叫alert()印出content的內容。
app.component.ts (AppComponent)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demo';
content = 'hello world';
onClick() {
alert(this.content);
}
}
啟動專案並開啟http://localhost:4200/。
因為輸入欄位<input>的value屬性以property binding綁定了AppComponent.content的內容，所以輸入欄的文字為hello world。
滑鼠點擊按鈕時觸發click事件，並執行綁定的onClick()函式顯示content的內容，畫面會跳出alert提示並顯示hello world。
接著修改輸入欄位的內容為abc，所以AppComponent.content的內容也會因此被更改為abc，修改完再按一次按鈕則跳出abc。
參考：
沒有留言:
張貼留言