Angular 資料繫結 (3) - 事件繫結 - 筆記長也NotesHazuya

Angular 資料繫結 (3) - 事件繫結

2021-01-06 17:46:00   Angular

事件繫結(Event Binding)

事件繫結基本上會監聽使用者的動作,透過事件的觸發來執行某個事情。

語法使用

app.component.html

<button (click)="do()" type="button" [disabled]="state===true">我是按鈕,你按得到嗎?</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  state = false;

  do() : void{
    alert('You Click Button.');
  }
}

這樣點按鈕就會執行 do() 這個 function。

$event 參數

一般在繫結與註冊事件的時候不必帶入參數,但是如果帶入參數可以獲得更多有關這個事件的訊息,把上面的程式碼修改一下:

app.component.html

<button (click)="do($event)" type="button" [disabled]="state===true">我是按鈕,你按得到嗎?</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  state = false;

  do($event) : void{
    alert('You Click Button.');
  }
}

點選之後就可以在 F12 上看到這些屬性。

這樣可以在設計的時候有其他的組合方式。


長也

糾結當中的資管系學生,常碰PHP,喜歡進行網頁相關的設計,閒暇之餘就記錄一些筆記,紀錄自己的學習軌跡。