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

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

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

import { Component, Output, EventEmitter } from '@angular/core';

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

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
}

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

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
	
	send() {
		this.onData.emit('xxx');
	}
}

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

<button (click)="send()">
	send data
</button>

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

export class AppComponent {
	public onData(data: string) {
		console.log(data);
	}
}

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

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

ในคอมโพเนนต์ลูก สร้างสามปุ่มที่ปล่อยเหตุการณ์ต่างๆ กัน จากนั้นจับเหตุการณ์ที่ปล่อยออกมาในคอมโพเนนต์แม่