Angular – Xử lý sự kiện

Khi người dùng tương tác với trang web thì sẽ phát sinh sự kiện, những sự kiện thường thấy nhất là click chuột, gõ phím, tải trang web…v.v Đây là các sự kiện DOM (DOM Event), chúng ta có thể lắng nghe các sự kiện đó và tương tác lại với người dùng.

Bắt sự kiện

Trong Javascript ES5 thì chúng ta viết code bắt sự kiện như sau:

<button onclick="onClick()">

Còn trong TypeScript thì chúng ta viết đoạn code bắt sự kiện như sau:

<button (click)="onClick()">

Trong đó (click) là tên sự kiện, ở đây là sự kiện thả click chuột, onClick() là tên phương thức sẽ xử lý sự kiện đó, phương thức này chúng ta viết trong các lớp Component.

Ví dụ, bạn tạo một project mới từ quickstart, sau đó sửa trong file app.component.ts như sau:

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `

<button (click)="onClick()">Click here</button>

{{ message }}

`

})

export class AppComponent { 

message = "";

onClick() {

this.message = "Clicked";

}

}

src/app/app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	`import` `{ Component } from` `'@angular/core';` `@Component({` `selector:` `'my-app',` template: ` `<button (click)="onClick()">Click here</button>` `{{ message }}` ` `})` `export` `class` `AppComponent {` `message =` `"";` `onClick() {` `this.message =` `"Clicked";` `}` `}`

Rất đơn giản, chúng ta khai báo trong lớp AppComponent một thuộc tính là message, và khi click thì phương thức onClick() sẽ được gọi, trong đó chúng ta gán thuộc tính message giá trị là “Clicked”.Giá trị của thuộc tính này sẽ được hiển thị trên template.

Lấy dữ liệu từ sự kiện từ đối tượng $event

Có một số sự kiện sẽ mang theo cả dữ liệu, chẳng hạn như click chuột thì có thể lấy được tọa độ chuột, bấm phím thì lấy được kí tự phím vừa bấm… v.v Chúng ta có thể lấy được các dữ liệu đó.

Ví dụ chúng ta sửa lại lớp AppComponent như sau:

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `

Type here: <input (keyup)="onKey($event)">       

<p>You typed: {{values}}</p>

`

})

export class AppComponent {

values = "";

onKey(event: any) {

this.values = event.target.value;

}

}

src/app/app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	`import` `{ Component } from` `'@angular/core';` `@Component({` `selector:` `'my-app',` template: ` `Type here: <input (keyup)="onKey($event)">` `<p>You typed: {{values}}</p>` ` `})` `export` `class` `AppComponent {` `values =` `"";` `onKey(event: any) {` `this.values = event.target.value;` `}` `}`

Ở đây chúng ta khai báo template là một the <input>, với sự kiện keyup xử lý bằng phương thức onKey(). Dữ liệu sẽ được truyền vào tham số $event.

Khi người dùng nhấn và thả một phím, sự kiễn keyup sẽ xảy ra, Angular sẽ truyền đối tượng sự kiện DOM là biến $event vào làm tham số của phương thức onKey().

Tùy vào sự kiện là gì mà đối tượng $event sẽ có những thông tin khác nhau.

Tất cả các đối tượng sự kiện DOM đều có một thuộc tính là target, thuộc tính này tham chiếu đến thẻ đã phát sinh ra sự kiện đó, ở đây là <input>, và chúng ta có thể lấy thuộc tính value của thẻ này để lấy nội dung của thẻ.

Trong phương thức onKey() ở đây chúng ta gán giá trị cho biến values là giá trị trong event.target.value.

Trong đoạn code trên chúng ta khai báo kiểu dữ liệu của $event là any, tức là Angular sẽ tự động chuyển đổi sang kiểu dữ liệu DOM thích hợp, việc code như thế sẽ đơn giản và tránh các lỗi ngớ ngẩn.

Chúng ta có thể chỉ rõ ra kiểu dữ liệu như sau:

src/app/app.component.ts
export class AppComponent {

values = "";

onKey(event: KeyboardEvent) {

this.values = (<HTMLInputElement>event.target).value;

}

}

src/app/app.component.ts
1 2 3 4 5 6	`export` `class` `AppComponent {` `values =` `"";` `onKey(event: KeyboardEvent) {` `this.values = (<HTMLInputElement>event.target).value;` `}` `}`

Ở đây chúng ta chỉ rõ kiểu dữ liệu của $event là KeyboardEvent, tức là sự kiện từ bàn phím. Bạn có thể xem danh sách các kiểu dữ liệu sự kiện DOM ở đây.

Lấy dữ liệu trong template

Thay vì khai báo phương thức cho sự kiện, chúng ta có thể tham chiếu đến dữ liệu của sự kiện đó ngay trong template như sau:

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `

Type here: <input #box (keyup)="0">      

<p>You typed: {{box.value}}</p>

`

})

export class AppComponent { }

src/app/app.component.ts
1 2 3 4 5 6 7 8 9 10	`import` `{ Component } from` `'@angular/core';` `@Component({` `selector:` `'my-app',` template: ` `Type here: <input` `#box (keyup)="0">` `<p>You typed: {{box.value}}</p>` ` `})` `export` `class` `AppComponent { }`

Để làm việc này thì chúng ta khai báo tên biến cho template, bằng cách ghi tên kèm với dấu #,ở đây chúng ta khai báo là #box. Ở phần bắt sự kiện chúng ta điền vào là 0, và chúng ta có thể dùng tên biến template đó để lấy giá trị của chính thẻ đó mà không cần phải dùng tới phương thức.

Lọc sự kiện

Đôi khi chúng ta chỉ cần muốn bắt một giá trị cụ thể, chẳng hạn như phím Enter, chúng ta có thể bắt giá trị đó thông qua thuộc tính $event.keyCode. Ví dụ:

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `

Type here: <input #box (keyup.enter)="onEnter(box.value)">       

<p>You typed: {{ value }}</p>

`

})

export class AppComponent {

value = "";

onEnter(value: string) {

this.value = value;

}

}

src/app/app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	`import` `{ Component } from` `'@angular/core';` `@Component({` `selector:` `'my-app',` template: ` `Type here: <input` `#box (keyup.enter)="onEnter(box.value)">` `<p>You typed: {{ value }}</p>` ` `})` `export` `class` `AppComponent {` `value =` `"";` `onEnter(value: string) {` `this.value = value;` `}` `}`