網頁

2019/6/1

Angular 事件綁定(Event binding)簡單範例

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



參考:

沒有留言:

張貼留言