สัญญาณในเทมเพลต
ผูกค่าสัญญาณโดยตรงในเทมเพลตของคอมโพเนนต์
สัญญาณในเทมเพลต เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
Signals ในเทมเพลต
ข้อดีอย่างหนึ่งของ Signals คือ คุณสามารถอ่านค่าได้โดยตรงในเทมเพลตด้วยการเรียกใช้ เช่นเดียวกับใน TypeScript ไม่จำเป็นต้องใช้ async pipe
การอ่านค่าในการแทรกข้อความ
ในเทมเพลต ให้เรียกใช้ Signal ภายในการแทรกข้อความด้วยวงเล็บปีกกาคู่ เพื่อแสดงค่าของ Signal
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}ไม่ต้องใช้ Async Pipe
เมื่อใช้ Observables คุณต้องใช้ async pipe เพื่อสมัครรับข้อมูลและยกเลิกการสมัครรับข้อมูล แต่ Signals ทำงานแบบพร้อมกัน ดังนั้นเพียงเรียกใช้ Signal เท่านั้น และไม่มีสิ่งใดที่ต้องยกเลิกการสมัคร
การอัปเดตมุมมองอัตโนมัติ
เมื่อ Signal ที่อ่านในเทมเพลตเปลี่ยนแปลง Angular จะทราบว่าเทมเพลตนั้นขึ้นอยู่กับ Signal ดังกล่าว และจะอัปเดตเฉพาะการผูกข้อมูลนั้น นี่คือการทำงานของการตอบสนองแบบละเอียด
การเรียกใช้ Signals ในตัวจัดการเหตุการณ์
ผูกเหตุการณ์เข้ากับเมธอดของคอมโพเนนต์ที่อัปเดต Signals แล้วเทมเพลตจะแสดงผลการผูกข้อมูลที่ได้รับผลกระทบใหม่โดยอัตโนมัติ
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signals ในการผูกคุณสมบัติ
คุณสามารถเรียกใช้ Signal ภายในการผูกข้อมูลทุกประเภท รวมถึงการผูกคุณสมบัติและแอตทริบิวต์
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signals กับโฟลว์ควบคุมในตัว
เทมเพลตสมัยใหม่ใช้บล็อกโฟลว์ควบคุมในตัว คุณสามารถอ่านค่า Signal ภายในบล็อก if ได้ด้วยการเรียกใช้ Signal
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Computed Signals ในเทมเพลต
ค่าที่คำนวณต่อยอดเหมาะอย่างยิ่งสำหรับเทมเพลต Computed Signal จะคำนวณใหม่เฉพาะเมื่อแหล่งข้อมูลเปลี่ยนแปลง และอ่านค่าในลักษณะเดียวกัน
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}การอ่านค่า Computed ในมุมมอง
อ่านค่า Computed Signal ในเทมเพลตเช่นเดียวกับ Signal ใด ๆ
// template: <p>Total: {{ total() }}</p>เหตุผลที่มีประสิทธิภาพ
เนื่องจาก Angular ติดตามได้อย่างแม่นยำว่านิพจน์ใดในเทมเพลตอ่านค่า Signal ใด จึงข้ามการประมวลผลส่วนต่าง ๆ ของมุมมองที่ไม่ได้ขึ้นอยู่กับ Signal ที่เปลี่ยนแปลงได้
ข้อผิดพลาดที่พบบ่อย: ลืมวงเล็บ
หากคุณเขียน count แทน count() ในเทมเพลต ระบบจะแสดงฟังก์ชัน Signal เอง ไม่ใช่ค่าของ Signal ดังนั้นโปรดเรียกใช้ Signal เสมอ
ตรวจสอบสั้น ๆ: เทมเพลต
Signals ปรากฏในเทมเพลตอย่างไร
สรุป: Signals ในเทมเพลต
คุณอ่านค่า Signals ในเทมเพลตด้วยการเรียกใช้และใส่วงเล็บ โดยไม่ต้องใช้ async pipe และไม่มีสิ่งใดที่ต้องยกเลิกการสมัคร Angular จะอัปเดตเฉพาะการผูกข้อมูลที่ขึ้นอยู่กับ Signal ที่เปลี่ยนแปลง และ Computed Signals ก็ทำงานในลักษณะเดียวกัน คุณเรียนรู้พื้นฐานของ Signals ครบแล้ว
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 38
- บทเรียน
- 144
คำถามที่พบบ่อย
บทเรียน “สัญญาณในเทมเพลต” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สัญญาณในเทมเพลต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ