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

สามารถส่งข้อมูลจากคอมโพเนนต์ลูกไปยังคอมโพเนนต์แม่ได้ ซึ่งทำได้โดยการปล่อยเหตุการณ์โดยใช้วัตถุพิเศษ EventEmitter และเมธอด emit คอมโพเนนต์ลูกจะปล่อยเหตุการณ์ พร้อมทั้งส่งข้อมูลบางอย่างมากับเหตุการณ์ ส่วนคอมโพเนนต์แม่จะจับเหตุการณ์และรับข้อมูลจากคอมโพเนนต์ลูก

มาลองทำดูในทางปฏิบัติ สำหรับการนี้เราต้องทำตามขั้นตอนหลายขั้นตอน ขั้นแรกในคอมโพเนนต์ลูกของเรา ให้ import decorator @Output และคลาส EventEmitter:

app/user/user.component.tsimport { Component, Output, EventEmitter } from '@angular/core';

ตอนนี้ในคลาสลูก สร้าง property onData โดยมีค่าเป็นออบเจ็กต์ใหม่ EventEmitter ที่มี string:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
}

ตอนนี้สร้างเมธอด send ซึ่งการเรียกใช้จะปล่อยเหตุการณ์ onData ไปยังคอมโพเนนต์แม่พร้อมกับข้อความที่กำหนด:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
  
  send() {
    this.onData.emit('xxx');
  }
}

ในเทมเพลตของคอมโพเนนต์ลูก สร้างปุ่ม ซึ่งเมื่อคลิกจะเรียกใช้เมธอด send:

app/user/user.component.html<button (click)="send()">
  send data
</button>

ในคอมโพเนนต์แม่ สร้างเมธอด onData ซึ่งจะถูกเรียกอัตโนมัติเมื่อมีเหตุการณ์ที่สอดคล้องกันถูกปล่อยออกมาจากคอมโพเนนต์ลูก ข้อมูลที่ส่งมาจะเข้าสู่พารามิเตอร์ของเมธอด:

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

ในเทมเพลตของคอมโพเนนต์แม่ ผูกเหตุการณ์กับแท็กของคอมโพเนนต์ลูก:

app/app.component.html<app-user (onData)="onData($event)"></app-user>