本篇示範Angular的事件綁定(Event binding)的簡單範例。
Event binding的語法：
Event binding撰寫在HTML DOM元素中，例如<button>
等號=左側為綁定的目標事件(Target event)；右側為Template statement。
「事件(Event)」是指DOM元素的事件。
綁定的事件放在括弧()中，例如上面綁定事件為click事件。
Template statement用雙引號""夾起，例如上面綁定的為Component的onSave()函式。
而Event binding的作用是，當目標事件被觸發時，會執行被綁定的template statement。
順便一提，在沒有前端框架如Angular以前都是用JavaScript的事件監聽(Event Listener)器來處理。
下面範例為Angular新建專案的app.component.html及app.component.ts。
修改app.component.html，把新專案預設的內容刪除，更改為下面內容。
在app.component.html新增一個按鈕<button>元素並設定一個event binding。
範例中綁定的目標事件為click事件，也就是滑鼠點擊按鈕時會觸發的事件。綁定的template statement為AppComponent.onClick()函式。也就是說，當按鈕被點擊時，會執行AppComponent.onClick()。
另外增加一個插值符號(interpolation){{content}}來顯示AppComponent.content的值。
app.component.html
<h1>{{title}}</h1>
<button (click)="onClick()">Click</button>
<h1>{{content}}</h1>
然後在app.component.ts的AppComponent類別新增一個content屬性及一個函式屬性onClick()。
onClick()內容為呼叫alert()印出'Hello World'，及更改屬性content的內容為'Hello World'。
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demo';
content = ''; // 此內容會反映到html的{{content}}
onClick() {
alert('Hello World');
this.content = 'Hello World';
}
}
在命令提示介面輸入ng serve啟動專案，並開啟http://localhost:4200/。
當按鈕被滑鼠點擊時，觸發click事件，並執行綁定的onClick()函式。
onClick()函式中先調用alert()印出Hello World，所以畫面會先跳出alert提示。
接著將content的值改為Hello World，所以app.component.html中的{{content}}的內容也會因此被更改為Hello World。
參考：
沒有留言:
張貼留言