Angular 4 - 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 4. 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, nhấp chuột hoặc di chuột, 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 .ts tập tin: 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 4 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = 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ị the Button is clicked như thể hiện trong ảnh chụp màn hình sau -

Bây giờ chúng ta hãy thêm sự kiện thay đổi 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 -

<!--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>

<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 4 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) {
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

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 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   
   isavailable = 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”.