0Pricing
Angular Academy · บทเรียน

คุณสมบัติที่ผูกสองทางแบบกำหนดเอง

เปิดเผยอินพุตที่ผูกสองทางของคุณเอง

คุณสมบัติที่ผูกสองทางแบบกำหนดเอง เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

การผูกแบบสองทางที่กำหนดเอง

คุณสามารถทำให้คุณสมบัติใด ๆ ของคอมโพเนนต์รองรับการผูกแบบสองทางได้ Angular รองรับสองแนวทาง ได้แก่ คู่ @Input กับ @Output แบบดั้งเดิม หรือสัญญาณ model() แบบใหม่

แบบแผนการตั้งชื่อ

เพื่อให้การผูกแบบสองทางทำงาน ชื่อเอาต์พุตต้องเป็นชื่ออินพุตต่อท้ายด้วยส่วนเติมท้าย Change ตัวอย่างเช่น อินพุต size ต้องใช้เอาต์พุต sizeChange

การประกาศอินพุต

เริ่มด้วยอินพุตทั่วไปที่คอมโพเนนต์แม่สามารถกำหนดค่าได้

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

export class RatingComponent {
  @Input() value = 0;
}

การประกาศเอาต์พุตที่ตรงกัน

เพิ่ม EventEmitter ของ @Output โดยตั้งชื่อให้ต่อท้ายด้วย Change

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

การส่งเหตุการณ์เมื่ออัปเดต

เมื่อคอมโพเนนต์เปลี่ยนค่าภายใน ให้อัปเดตคุณสมบัติและส่งค่าใหม่ออกไป เพื่อให้คอมโพเนนต์แม่ยังคงมีค่าตรงกัน

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

การผูกจากคอมโพเนนต์แม่

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

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

ตัวอย่างอินพุต/เอาต์พุตแบบเต็ม

ต่อไปนี้คือตัวอย่างคอมโพเนนต์ที่รองรับการผูกแบบสองทางที่กำหนดเองอย่างครบถ้วน โดยใช้ส่วนเชื่อมต่อแบบดั้งเดิม

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

แนวทาง model สมัยใหม่

พฤติกรรมเดียวกันนี้เขียนได้สั้นกว่ามากด้วย model() ซึ่งสร้างคู่อินพุตและเอาต์พุตให้โดยอัตโนมัติ

import { model } from "@angular/core";

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

เปรียบเทียบสองแนวทาง

คู่แบบดั้งเดิมมีการประกาศอย่างชัดเจนและใช้ได้ทุกที่ ส่วน model() กระชับและทำงานด้วยสัญญาณ ทั้งสองแบบเปิดเผยการผูก [(value)] แบบเดียวกันให้คอมโพเนนต์แม่

คุณสมบัติแบบสองทางหลายรายการ

คอมโพเนนต์สามารถเปิดเผยคุณสมบัติที่รองรับการผูกแบบสองทางได้หลายรายการ โดยแต่ละรายการต้องทำตามแบบแผน input/inputChange

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

การเลือกแนวทาง

สำหรับโค้ดใหม่ ควรเลือก model() เพื่อความกระชับและการทำงานร่วมกับสัญญาณ ใช้คู่ input/output ที่ประกาศอย่างชัดเจนเมื่อต้องการควบคุมอย่างละเอียดหรือไม่ได้ใช้สัญญาณ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับคุณสมบัติที่รองรับการผูกแบบสองทางที่กำหนดเองของคุณ

ทบทวน

การผูกแบบสองทางที่กำหนดเองต้องมีอินพุตและเอาต์พุตที่ชื่อ inputChange โดยส่งเหตุการณ์ทุกครั้งที่มีการอัปเดต สัญญาณ model() แบบใหม่จะสร้างคู่นี้ให้อัตโนมัติ และเป็นตัวเลือกที่กระชับสำหรับโค้ดใหม่

คำถามที่พบบ่อย

บทเรียน “คุณสมบัติที่ผูกสองทางแบบกำหนดเอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คุณสมบัติที่ผูกสองทางแบบกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติที่ผูกสองทางแบบกำหนดเอง”

เปิดเผยอินพุตที่ผูกสองทางของคุณเอง คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “คุณสมบัติที่ผูกสองทางแบบกำหนดเอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ทบทวนการผูกคุณสมบัติและเหตุการณ์
  2. การผูกสองทางด้วย ngModel
  3. อินพุตสัญญาณ model()
  4. คุณสมบัติที่ผูกสองทางแบบกำหนดเอง
← กลับไปที่ Angular Academy