สัญญาณคืออะไร
ทำความเข้าใจสัญญาณในฐานะตัวเก็บสถานะแบบรีแอกทีฟ
สัญญาณคืออะไร เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
Signals คืออะไร
Signal คือหน่วยพื้นฐานแบบรีแอกทีฟที่เปิดตัวใน Angular รุ่นใหม่ โดยเป็นตัวห่อหุ้มค่าซึ่งสามารถแจ้งให้ผู้ใช้ที่สนใจทราบเมื่อค่านั้นเปลี่ยนแปลง
Signals ทำให้ระบบรีแอกทีฟของ Angular มีความชัดเจน ละเอียดเป็นส่วนย่อย และทำความเข้าใจได้ง่าย
เหตุใดระบบรีแอกทีฟจึงสำคัญ
ในเฟรมเวิร์กสำหรับส่วนติดต่อผู้ใช้ หน้าจอต้องสอดคล้องกับข้อมูลอยู่เสมอ เมื่อข้อมูลเปลี่ยน มุมมองก็ควรอัปเดต
Signals ทำให้ Angular ทราบได้อย่างแม่นยำว่าอะไรเปลี่ยนแปลงและอะไรขึ้นอยู่กับสิ่งนั้น จึงรีเฟรชเฉพาะส่วนของมุมมองที่ได้รับผลกระทบ
ปัญหาก่อนมี Signals
ก่อนหน้านี้ Angular อาศัย Zone.js และการตรวจจับการเปลี่ยนแปลงในวงกว้าง หลังเหตุการณ์แบบอะซิงโครนัสใด ๆ Angular จะตรวจสอบส่วนใหญ่ของแผนผังคอมโพเนนต์อีกครั้ง
วิธีนี้ใช้งานได้ แต่ก็อาจสิ้นเปลือง Signals ช่วยให้อัปเดตได้อย่างละเอียดโดยไม่ต้องสแกนทุกส่วน
Signal เก็บค่าไว้
ลองนึกภาพว่า signal เป็นกล่องอัจฉริยะที่ห่อหุ้มค่าไว้ คุณสามารถอ่านสิ่งที่อยู่ภายในและแทนที่สิ่งนั้นได้
การอ่าน signal ยังบันทึกด้วยว่าใครเป็นผู้อ่าน เพื่อให้สามารถอัปเดตสิ่งที่ขึ้นต่อกันได้ในภายหลัง
import { signal } from '@angular/core';
const count = signal(0);
// count is now a signal holding the number 0การอ่านคือการเรียกฟังก์ชัน
แนวคิดสำคัญคือ หากต้องการอ่าน signal ให้เรียกใช้เหมือนฟังก์ชัน วงเล็บคือสิ่งที่ทำให้ Angular ทราบว่าคุณกำลังอ่านค่าปัจจุบัน
const count = signal(0);
console.log(count()); // 0 <-- note the ()Signals ทำงานแบบซิงโครนัส
การอ่าน signal เป็นการทำงานแบบซิงโครนัสและคืนค่าปัจจุบันทันทีเสมอ ไม่มีการสมัครรับข้อมูล ไม่มีไปป์แบบอะซิงโครนัส และไม่ต้องจัดการยกเลิกการสมัครด้วยตนเอง
เขียนค่าได้กับคำนวณค่า
signal พื้นฐานที่สร้างด้วย signal() สามารถเขียนค่าได้ ซึ่งหมายความว่าคุณเปลี่ยนค่าได้
นอกจากนี้ยังมี signal แบบคำนวณ (ค่าที่ได้จากการคำนวณ) และเอฟเฟกต์ (ผลข้างเคียง) ซึ่งต่อยอดจาก signal ที่เขียนค่าได้
Signals ติดตามสิ่งที่ขึ้นต่อกัน
เมื่อค่าที่คำนวณหรือแม่แบบอ่าน signal, Angular จะบันทึกสิ่งที่ขึ้นต่อกันนั้นโดยอัตโนมัติ
ต่อมา หาก signal เปลี่ยนแปลง ระบบจะคำนวณใหม่เฉพาะสิ่งที่ขึ้นต่อกันเหล่านั้น นี่คือเหตุผลที่ signals มีประสิทธิภาพ
การอัปเดตที่ไร้ความคลาดเคลื่อน
Signals ได้รับการออกแบบให้ไร้ความคลาดเคลื่อน ผู้ใช้จะเห็นค่าที่สอดคล้องกันเสมอ และจะไม่ถูกแจ้งด้วยสถานะที่อัปเดตเพียงบางส่วนหรือยังไม่เสร็จสมบูรณ์
จึงทำให้กราฟรีแอกทีฟที่ซับซ้อนคาดการณ์ได้
Signals อยู่ที่ใด
Signals เป็นส่วนหนึ่งของ @angular/core คุณนำเข้า signal, computed และ effect จากที่นั่น
คุณสามารถใช้สิ่งเหล่านี้ภายในคอมโพเนนต์ บริการ หรือโค้ด TypeScript ใด ๆ ได้
import { signal, computed, effect } from '@angular/core';Signals ในคอมโพเนนต์
รูปแบบที่ใช้กันทั่วไปคือประกาศ signals เป็นฟิลด์ของคลาสในคอมโพเนนต์ แล้วอ่านค่าเหล่านั้นในแม่แบบ
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '' })
export class CounterComponent {
count = signal(0);
}ตรวจสอบสั้น ๆ: พื้นฐานของ Signal
มาทบทวนความเข้าใจของคุณเกี่ยวกับ signal กัน
ทบทวน: Signals คืออะไร
คุณได้เรียนรู้ว่า signal คือตัวห่อหุ้มค่าแบบรีแอกทีฟที่แจ้งให้ผู้ใช้ทราบเมื่อค่าเปลี่ยนแปลง คุณอ่าน signal ด้วยการเรียกใช้พร้อมวงเล็บ การอ่านทำงานแบบซิงโครนัส และ signals ช่วยให้อัปเดตได้อย่างละเอียดและไร้ความคลาดเคลื่อน
ถัดไป คุณจะสร้างและอ่าน signals ของตนเอง
คำถามที่พบบ่อย
บทเรียน “สัญญาณคืออะไร” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สัญญาณคืออะไร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ