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

ทบทวนการผูกคุณสมบัติและเหตุการณ์

ผูกข้อมูลเข้าและเหตุการณ์ออกจากคอมโพเนนต์

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

ทิศทางการไหลของข้อมูลสองทาง

แม่แบบ Angular เคลื่อนข้อมูลได้สองทิศทาง: การผูกกับคุณสมบัติจะส่งข้อมูลเข้าสู่ DOM และการผูกกับเหตุการณ์จะส่งการกระทำของผู้ใช้กลับไปยังคอมโพเนนต์

การแทรกค่า

การแทรกค่าด้วยวงเล็บปีกกาคู่จะแสดงค่าของคอมโพเนนต์เป็นข้อความ เป็นการส่งข้อมูลทางเดียวจากคอมโพเนนต์ไปยังมุมมอง

<p>{{ title }}</p>

// component
title = "Dashboard";

ไวยากรณ์การผูกกับคุณสมบัติ

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

<img [src]="imageUrl" [alt]="caption">

// component
imageUrl = "/logo.png";
caption = "Logo";

การผูกกับอินพุตของคอมโพเนนต์

การผูกกับคุณสมบัติยังใช้ส่งค่าไปยังคุณสมบัติ @Input ของคอมโพเนนต์ลูกได้ด้วย

<app-user [name]="userName"></app-user>

// parent component
userName = "Ada";

แอตทริบิวต์กับคุณสมบัติ

การผูกกับคุณสมบัติจะกำหนดเป้าหมายเป็นคุณสมบัติของ DOM ไม่ใช่แอตทริบิวต์ HTML หากต้องการผูกกับแอตทริบิวต์โดยตรง ให้ใช้คำนำหน้า attr.

<button [attr.aria-label]="label">Save</button>

ไวยากรณ์การผูกกับเหตุการณ์

วงเล็บกลมใช้ผูกเหตุการณ์ DOM เข้ากับเมธอดของคอมโพเนนต์ เมธอดจะทำงานเมื่อเหตุการณ์เกิดขึ้น

<button (click)="save()">Save</button>

// component
save() { console.log("saved"); }

ออบเจ็กต์ $event

ตัวแปรพิเศษ $event จะนำข้อมูลเหตุการณ์ส่งไปยังตัวจัดการของคุณ

<input (input)="onInput($event)">

// component
onInput(e: Event) {
  this.text = (e.target as HTMLInputElement).value;
}

การผูกกับเอาต์พุตของคอมโพเนนต์

การผูกกับเหตุการณ์ยังใช้รับฟังเหตุการณ์ @Output ของคอมโพเนนต์ลูกที่ส่งออกผ่าน EventEmitter ได้ด้วย

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) { this.count = value; }

การรวมการผูกทั้งสองแบบ

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

<input [value]="name" (input)="name = $event.target.value">

การผูกคลาสและสไตล์

การผูกกับคุณสมบัติแบบพิเศษจะเปิดหรือปิดคลาสและสไตล์ตามสถานะของคอมโพเนนต์

<div [class.active]="isActive"
     [style.color]="textColor">
  Item
</div>

การรักษาแม่แบบให้เป็นแบบประกาศ

การผูกช่วยให้ความสัมพันธ์ระหว่างข้อมูลกับมุมมองเป็นแบบประกาศ Angular จะอัปเดต DOM โดยอัตโนมัติเมื่อค่าที่ผูกไว้เปลี่ยนแปลง

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

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

ทบทวน

การผูกกับคุณสมบัติ [prop] จะส่งข้อมูลไปยังมุมมอง การผูกกับเหตุการณ์ (event) จะส่งการกระทำกลับมา และการแทรกค่าจะแสดงข้อความ การรวมการผูกกับคุณสมบัติและเหตุการณ์กับค่าเดียวกันจะตั้งค่าการผูกแบบสองทาง

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

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

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

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

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

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

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

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

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

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

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

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

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