Thử Nghiệm Với Angular 2 Phần 6: Quản Lý Event Trong Angular 2

Giới thiệu

Trong bài học đầu tiên của series Thử Nghiệm Với Angular 2 chúng ta đã làm quen với Event Binding trong Angular 2. Bài học này sẽ củng cố một số kiến thức về Event trong Angular 2 như $event object hay key event filtering.

Event Binding

Angular 2 cung cấp event binding cho bất kỳ event nào của DOM tương ứng như click, keyup, keydown, mouseover, …

Để binding event cho một phần tử nào bạn chỉ cần bao đóng nó trong cặp dấu ( <event> ) và bên trong là tên của event, vế tiếp theo của binding là một template statement: có thể là một hàm, hay một câu lệnh thực thi một hành động nào đó.

Ví dụ:

<button (click)="onClickMe()">Click me!</button>

Thao tác với $event object

Angular 2 cung cấp một object tên là $event, khi nó được truyền vào là tham số của hàm handle event thì bạn có thể truy cập vào các thuộc tính mà nó chứa trong đó, chẳng hạn event cho keyboard, mouse.

Ví dụ:

<input (keyup)="onKey($event)">

export class LoggerKeyUpComponent {
  onKey(event: Event) {
    // do something with event param
    console.log(event);
  }
}

Hoặc có thể có type của event:

<input (keyup)="onKey($event)">

export class LoggerKeyUpTypeComponent {

  onKey(event: KeyboardEvent) { // with type info
    // do something with event param
    console.log((<HTMLInputElement>event.target).value);
  }
}

Key event filtering

Khi thao tác với keyboard event, có thể chúng ta chỉ muốn lắng nghe trên một key xác định nào đó, lúc đó chúng ta có thể dùng key event filtering.

Ví dụ:

<input (keyup.enter)="onEnter($event)">

export class KeyUpFilteringComponent {
  value = '';
  onEnter(event: Event) { 
    // do something
    this.value = event.target.value;
  }
}

Video bài học

Tham khảo

Documentation: https://angular.io/docs/ts/latest/guide/user-input.html