การโต้ตอบระหว่างคอมโพเนนต์

ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีที่คอมโพเนนต์สื่อสารกันในแองกูลาร์ โดยเฉพาะการสื่อสารระหว่างคอมโพเนนต์แม่และคอมโพเนนต์ลูก

การโต้ตอบระหว่างคอมโพเนนต์แม่และลูก

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

การใช้ @Input()

ใช้ตัวตกแต่ง @Input() เพื่อรับข้อมูลจากคอมโพเนนต์แม่:

@Input() userData: string;

การส่งข้อมูลไปยังคอมโพเนนต์ลูก

ในเทมเพลตของคอมโพเนนต์แม่ ให้ส่งข้อมูลโดยใช้การผูกคุณสมบัติ:

<app-child [userData]="parentData"></app-child>

การสื่อสารจากคอมโพเนนต์ลูกไปยังแม่

คอมโพเนนต์ลูกจะสื่อสารขึ้นไปยังคอมโพเนนต์แม่โดยใช้เหตุการณ์ร่วมกับตัวตกแต่ง @Output()

การใช้ @Output()

สร้างตัวส่งเหตุการณ์เพื่อส่งข้อมูลจากคอมโพเนนต์ลูกไปยังคอมโพเนนต์แม่:

@Output() dataEvent = new EventEmitter<string>();

การส่งเหตุการณ์

ส่งเหตุการณ์จากคอมโพเนนต์ลูก:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

การรับฟังเหตุการณ์ในคอมโพเนนต์แม่

จัดการเหตุการณ์ที่ส่งออกมาในเทมเพลตของคอมโพเนนต์แม่:

<app-child (dataEvent)="handleEvent($event)"></app-child>

สรุป

ตอนนี้คุณเข้าใจแล้วว่าคอมโพเนนต์สามารถโต้ตอบกันผ่านอินพุตและเอาต์พุตในแองกูลาร์ได้อย่างไร หมั่นฝึกฝนต่อไป