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

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

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

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

ตอนนี้เราต้องประกาศว่าข้อมูลจากภายนอกจะ ถูกนำเข้ามาใส่ในคุณสมบัติเหล่านี้ สำหรับสิ่งนี้ เราใช้ decorator พิเศษ Input นำเข้าไปยังคอมโพเนนต์ลูกของเรา:

import { Input } from '@angular/core';

และตอนนี้เราก็ใช้ decorator นี้กับคุณสมบัติของเรา:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

เราเพิ่มการแสดงผลข้อมูลในไฟล์เทมเพลต ของคอมโพเนนต์ลูก:

<p>{{ name }}</p>
<p>{{ age }}</p>

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

<user-data name="john" age="25"></user-data>