Angular7 - Sự kiện ràng buộc
Trong chương này, chúng ta sẽ thảo luận về cách hoạt động của Event Binding trong Angular 7. Khi người dùng tương tác với một ứng dụng dưới dạng di chuyển bàn phím, một cú nhấp chuột hoặc di chuột qua, nó sẽ tạo ra một sự kiện. Những sự kiện này cần được xử lý để thực hiện một số loại hành động. Đây là nơi ràng buộc sự kiện thành hình ảnh.
Chúng ta hãy xem xét một ví dụ để hiểu điều này tốt hơn.
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>Welcome to {{title}}.</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; 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>
bên trong app.component.html , chúng tôi đã xác định một nút và thêm một chức năng vào đó bằng sự kiện nhấp chuột.
Sau đây là cú pháp để xác định một nút và thêm một chức năng cho nó.
(click) = "myClickFunction($event)"
Hàm được định nghĩa trong:app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';
// declared array of months.
months = ["January", "February", "March", "April", "May","June", "July",
"August", "September", "October", "November", "December"];
isavailable = true; //variable is set to true
myClickFunction(event) {
//just added console.log which will display the event details in browser on click of the button.
alert("Button is clicked");
console.log(event);
}
}
Khi nhấp vào nút, điều khiển sẽ đến với chức năng myClickFunction và một hộp thoại sẽ xuất hiện, hiển thị Button is clicked như thể hiện trong ảnh chụp màn hình sau -
Kiểu cho nút được thêm vào add.component.css -
button {
background-color: #2B3BCF;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
}
Bây giờ chúng ta hãy thêm sự kiện onchange vào menu thả xuống.
Dòng mã sau sẽ giúp bạn thêm sự kiện thay đổi vào menu thả xuống -
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>Welcome to {{title}}.</h1>
</div>
<div> Months :
<select (change) = "changemonths($event)">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; 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>
<br/>
<button (click) = "myClickFunction($event)">
Click Me
</button>
Hàm được khai báo trong app.component.ts tập tin -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';
// declared array of months.
months = ["January", "Feburary", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
isavailable = true; //variable is set to true
myClickFunction(event) {
//just added console.log which will display the event
details in browser on click of the button.
alert("Button is clicked");
console.log(event);
}
changemonths(event) {
console.log("Changed month from the Dropdown");
console.log(event);
}
}
Chọn tháng từ menu thả xuống và bạn thấy thông báo trên bảng điều khiển “Changed month from the Dropdown”Được hiển thị trong bảng điều khiển cùng với sự kiện.
Hãy để chúng tôi thêm một thông báo cảnh báo trong app.component.ts khi giá trị từ menu thả xuống được thay đổi như hình dưới đây -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';
// declared array of months.
months = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
isavailable = true; //variable is set to true
myClickFunction(event) {
//just added console.log which will display the event
details in browser on click of the button.
alert("Button is clicked"); console.log(event);
}
changemonths(event) {
alert("Changed month from the Dropdown");
}
}
Khi giá trị trong menu thả xuống được thay đổi, một hộp thoại sẽ xuất hiện và thông báo sau sẽ được hiển thị:
“Changed month from the Dropdown”.