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

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

class UserComponent {
	private _name: string = '';
	
	set name(name: string) {
		if (name.length < 3) {
			this._name = name;
		} else {
			console.log('error');
		}
	}
	
	get age() {
		return this._userAge;
	}
}

สำหรับตัวอย่าง ลองทำ setter สำหรับอายุ, ซึ่งเราจะใช้ตรวจสอบข้อมูลที่ส่งมา และทำ getter สำหรับแสดง คุณสมบัติของผู้ใช้:

class UserComponent {
	private _name: string = '';
	
	@Input()
	set name(name: string) {
		if (name.length > 3) {
			this._name = name;
		} else {
			console.log('error');
		}
	}
	
	get name() {
		return this._name;
	}
}

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

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

และในคอมโพเนนต์ลูก ให้แสดงชื่อที่ ส่งมาบนหน้าจอ:

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

อธิบายว่าทำไมคุณสมบัติส่วนตัว _name จึงขึ้นต้นด้วยเครื่องหมายขีดล่าง

สร้าง setter และ getter สำหรับชื่อ สินค้าและราคาของมัน ซึ่งจะ ถูกส่งมาจากคอมโพเนนต์หลัก