網頁

▼

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.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。



參考：

沒有留言:

張貼留言