Angular 2 - Xử lý sự kiện
Trong Angular 2, các sự kiện như nhấp vào nút hoặc bất kỳ loại sự kiện nào khác cũng có thể được xử lý rất dễ dàng. Các sự kiện được kích hoạt từ trang html và được gửi đến lớp Angular JS để xử lý thêm.
Hãy xem một ví dụ về cách chúng ta có thể đạt được việc xử lý sự kiện. Trong ví dụ của chúng tôi, chúng tôi sẽ xem xét việc hiển thị một nút bấm và một thuộc tính trạng thái. Ban đầu, thuộc tính trạng thái sẽ là true. Khi nút được nhấp, thuộc tính trạng thái sau đó sẽ trở thành sai.
Step 1 - Thay đổi mã của tệp app.component.ts thành như sau.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
Status: boolean = true;
clicked(event) {
this.Status = false;
}
}
Những điểm sau đây cần được lưu ý về mã trên.
Chúng tôi đang xác định một biến được gọi là trạng thái của kiểu Boolean ban đầu là true.
Tiếp theo, chúng tôi đang xác định hàm được nhấp sẽ được gọi bất cứ khi nào nút của chúng tôi được nhấp trên trang html của chúng tôi. Trong hàm, chúng tôi thay đổi giá trị của thuộc tính Trạng thái từ đúng thành sai.
Step 2 - Thực hiện các thay đổi sau đối với tệp app / app.component.html, là tệp mẫu.
<div>
{{Status}}
<button (click) = "clicked()">Click</button>
</div>
Những điểm sau đây cần được lưu ý về mã trên.
Đầu tiên chúng ta chỉ hiển thị giá trị của thuộc tính Trạng thái của lớp chúng ta.
Sau đó, xác định nút html thẻ với giá trị của Click. Sau đó, chúng tôi đảm bảo rằng sự kiện nhấp của nút được kích hoạt thành sự kiện được nhấp trong lớp của chúng tôi.
Step 3 - Lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.
Step 4 - Nhấn vào nút Click, bạn sẽ nhận được kết quả như sau.