網頁

2020/4/10

Angular 屬性綁定(Property binding)範例

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.htmlapp.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.tsAppComponent類別新增一個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。


參考:

沒有留言:

張貼留言