Angular 2 - การจัดการเหตุการณ์

ใน Angular 2 เหตุการณ์ต่างๆเช่นการคลิกปุ่มหรือเหตุการณ์อื่น ๆ สามารถจัดการได้อย่างง่ายดาย เหตุการณ์จะถูกทริกเกอร์จากเพจ html และถูกส่งข้ามไปยังคลาส Angular JS เพื่อประมวลผลต่อไป

ลองดูตัวอย่างว่าเราจะจัดการเหตุการณ์ได้อย่างไร ในตัวอย่างของเราเราจะดูการแสดงปุ่มคลิกและคุณสมบัติสถานะ ในขั้นต้นคุณสมบัติสถานะจะเป็นจริง เมื่อคลิกปุ่มคุณสมบัติสถานะจะกลายเป็นเท็จ

Step 1 - เปลี่ยนรหัสของไฟล์ app.component.ts ดังต่อไปนี้

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; 
   } 
}

ประเด็นต่อไปนี้จำเป็นต้องสังเกตเกี่ยวกับรหัสข้างต้น

• เรากำลังกำหนดตัวแปรที่เรียกว่าสถานะของประเภทบูลีนซึ่งเป็นจริงในตอนแรก

• ต่อไปเรากำลังกำหนดฟังก์ชั่นการคลิกซึ่งจะถูกเรียกเมื่อใดก็ตามที่ปุ่มของเราถูกคลิกบนหน้า html ของเรา ในฟังก์ชันเราเปลี่ยนค่าคุณสมบัติสถานะจากจริงเป็นเท็จ

Step 2 - ทำการเปลี่ยนแปลงต่อไปนี้กับไฟล์ app / app.component.html ซึ่งเป็นไฟล์เทมเพลต

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

ประเด็นต่อไปนี้จำเป็นต้องสังเกตเกี่ยวกับรหัสข้างต้น

• อันดับแรกเราเพียงแค่แสดงค่าของคุณสมบัติสถานะของคลาสของเรา

• จากนั้นกำลังกำหนดแท็ก html ของปุ่มด้วยค่า Click จากนั้นเราตรวจสอบให้แน่ใจว่าเหตุการณ์การคลิกของปุ่มถูกกระตุ้นให้เกิดเหตุการณ์ที่ถูกคลิกในชั้นเรียนของเรา

Step 3 - บันทึกการเปลี่ยนแปลงรหัสทั้งหมดและรีเฟรชเบราว์เซอร์คุณจะได้รับผลลัพธ์ต่อไปนี้

Step 4 - คลิกปุ่มคลิกคุณจะได้ผลลัพธ์ดังต่อไปนี้