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

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

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

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

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

app/user/user.component.tsimport { Input } from '@angular/core';

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

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

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

app/user/user.component.html<p>{{ name }}</p>
<p>{{ age }}</p>

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

app/app.component.html<user-data name="john" age="25"></user-data>