การทำปฏิกิริยาใน Angular

เมื่อใดก็ตามที่มีการเปลี่ยนแปลงคุณสมบัติสาธารณะ เทมเพลตจะตอบสนองแบบปฏิกิริยา นั่นคือเปลี่ยนแปลงทันที นี่คือวิธีที่ การทำปฏิกิริยา ทำงานใน Angular

ลองดูตัวอย่าง สมมติว่าเรามี คุณสมบัติที่เก็บข้อความ:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

ลองแสดงคุณสมบัติของเราในแท็กบางแท็ก:

app/app.component.html<div>
  {{ text }}
</div>

ตอนนี้เรามาสร้างปุ่ม เมื่อคลิกที่ปุ่มนั้น จะเรียกใช้เมธอดของคลาส:

app/app.component.html<button (click)="show()">
  show
</button>

ในเมธอดนี้เราจะเปลี่ยนข้อความ:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'hello';
  }
}

ตอนนี้ ถ้าเราเริ่มรันโค้ดและกดที่ ปุ่ม ข้อความใน div จะเปลี่ยนไปทันทีหลังจากกด