Event binding trong Angular 4
Khi người dùng tương tác với ứng dụng bằng các cách khác nhau: dùng bàn phím, click chuột, di chuyển chuột thì đều sinh ra một sự kiện. Các sự kiện này cần được kiểm soát (handle) để thực hiện hành động theo ý muốn của lập trình viên.
![banquyen png](https://freetuts.net/public/banquyen.png)
Trong bài này, chúng ta sẽ tìm hiểu về event binding (hay còn gọi là gán, kiểm soát các sự kiện) trong Angular 4.
Cách sử dụng
(event_name) = "function_name($event)"
event_name: tên event (click, mouseover, mouseenter, ...)
Bài viết này được đăng tại [free tuts .net]
function_name: tên function trong file component.ts
Ví dụ với sự kiện click
Cùng lấy 1 ví dụ: Chúng ta có 1 button là click me. Khi click vào button này sẽ hiển thị thông báo: "Nhận được lệnh click từ button"
Đầu tiên, thêm button và gán sự kiện click cho button này bên view html
<div style="text-align:center"> <h1> Welcome to {{ title }}</h1> </div> <div> Months : <select> <option *ngFor="let i of months">{{i}}</option> </select> </div> <div> <span *ngIf="is_valid; then condition1 else condition2"> Condition is valid. </span> <ng-template #condition1>Condition is valid</ng-template> <ng-template #condition2>Condition is invalid</ng-template> </div> // Tạo button và gán sự kiện cho button <button (click)="myClickFunction($event)">Click Me</button>
Sau đó, khai báo function myClickFunction
trong component.ts và thực hiện hiển thị thông báo ra màn hình:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 4 Project!'; //array of months. months = ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"]; is_available = true; // Khai báo hàm xử lý sự kiện cho button myClickFunction(event) { alert("Nhận được lệnh click từ button"); } }
Khi click vào button, ta nhận được thông báo như hình:
Ví dụ với sự kiện change
Một ví dụ khác: khi thay đổi tháng trong dropdown danh sách các tháng sẽ hiển thị thông báo: "Bạn vừa thay đổi tháng trong dropdown"
Đầu tiên, gán sự kiện change cho dropdown ngoài view html
<div style="text-align:center"> <h1> Welcome to {{title}}. </h1> </div> <div> Months : // Gán sự kiện change cho select <select (change)="changemonths($event)"> <option *ngFor="let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf="is_valid; then condition1 else condition2"> Condition is valid. </span> <ng-template #condition1>Condition is valid</ng-template> <ng-template #condition2>Condition is invalid</ng-template> </div> <button (click)="myClickFunction($event)"> Click Me </button>
Sau đó khai báo sự kiện changemonths
trong component.ts
và thực hiện thông báo ra màn hình:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 4 Project!'; //array of months. months = ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"]; is_available = true; myClickFunction(event) { alert("Nhận được lệnh click từ button"); } // Khai báo hàm change month để kiểm soát sự kiện change đã khai báo bên html changemonths(event) { alert("Bạn vừa thay đổi tháng trong dropdown"); } }
Khi thay đổi một tháng bất kì trong dropdown, bạn nhận được thông báo như hình dưới:
Bài học về event binding trong Angular 4 của chúng ta đến đây là hết rồi. Ở bài sau, chúng ta sẽ tìm hiểu về template trong Angular 4.
Danh sách file tải về
Tên file tải về | Pass giải nén |
---|---|
Source code | freetuts.net hoặc gameportable.net |