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

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

app/user/user.component.tsclass 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 สำหรับแสดง คุณสมบัติของผู้ใช้:

app/user/user.component.tsclass 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;
  }
}

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

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

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

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