การสร้างและอ่านสัญญาณ
ประกาศสัญญาณที่เขียนค่าได้และอ่านค่าของสัญญาณ
การสร้างและอ่านสัญญาณ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้าง Signal
คุณสร้าง signal ที่เขียนค่าได้ด้วยฟังก์ชันสร้าง signal() โดยส่งค่าเริ่มต้นเข้าไป
import { signal } from '@angular/core';
const c = signal(0); // initial value is 0ค่าเริ่มต้นกำหนดชนิดข้อมูล
TypeScript อนุมานชนิดของ signal จากค่าเริ่มต้น signal(0) จึงเป็น WritableSignal<number>
const name = signal('Alice'); // WritableSignal<string>
const flag = signal(false); // WritableSignal<boolean>การอ่าน Signal
เรียกใช้ signal เพื่ออ่านค่าปัจจุบัน การเรียกใช้นี้จะคืนค่าที่จัดเก็บไว้และลงทะเบียนสิ่งที่ขึ้นต่อกัน หากคุณอยู่ภายในบริบทรีแอกทีฟ
const c = signal(0);
const current = c(); // current === 0การอ่านหลายครั้ง
คุณสามารถอ่าน signal ได้บ่อยเท่าที่ต้องการ แต่ละครั้งจะคืนค่าล่าสุด ณ ขณะที่เรียกใช้
const c = signal(10);
console.log(c()); // 10
console.log(c()); // 10การระบุชนิดข้อมูลอย่างชัดเจน
คุณสามารถระบุชนิดข้อมูลอย่างชัดเจนได้ เมื่อค่าเริ่มต้นยังไม่สื่อชนิดข้อมูลได้ครบถ้วน เช่น ค่าที่อาจเป็น null ได้ด้วย
const user = signal<string | null>(null);
console.log(user()); // nullSignals ที่เก็บออบเจ็กต์
signal สามารถเก็บค่าใด ๆ ได้ รวมถึงออบเจ็กต์และอาร์เรย์
const point = signal({ x: 0, y: 0 });
console.log(point().x); // 0Signals ที่เก็บอาร์เรย์
อาร์เรย์ทำงานในลักษณะเดียวกัน การอ่านจะคืนการอ้างอิงอาร์เรย์ปัจจุบัน
const items = signal<string[]>(['a', 'b']);
console.log(items().length); // 2Signals ในฐานะฟิลด์ของคลาส
ในคอมโพเนนต์และบริการ ให้ประกาศ signals เป็นฟิลด์ โดยจะเริ่มต้นค่าเพียงครั้งเดียวเมื่อสร้างอินสแตนซ์
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
}การอ่านในคลาสคอมโพเนนต์
คุณสามารถอ่าน signal ได้ทุกที่ในคลาส เช่น ภายในเมธอด โดยเรียกใช้ signal นั้น
export class CounterStore {
count = signal(0);
isZero(): boolean {
return this.count() === 0;
}
}การเข้าถึงแบบอ่านอย่างเดียว
หากต้องการเปิดเผย signal โดยไม่อนุญาตให้ผู้ใช้เปลี่ยนค่า คุณสามารถเปิดเผยผ่านเมธอด asReadonly() ได้
const internal = signal(0);
export const value = internal.asReadonly();
// value() works; value.set is not availableหลักการตั้งชื่อ
หลักการทั่วไปคือ ตั้งชื่อ signal ตามค่าที่เก็บไว้ (เช่น count, items) เนื่องจากการอ่านมีลักษณะเหมือนตัวเข้าถึงค่าทั่วไป: count()
ตรวจสอบสั้น ๆ: การสร้าง Signals
ทดสอบความเข้าใจของคุณเกี่ยวกับการสร้างและการอ่าน signals
ทบทวน: การสร้างและการอ่าน
ตอนนี้คุณทราบวิธีสร้าง signal ที่เขียนค่าได้ด้วย signal(initialValue) วิธีที่ TypeScript อนุมานชนิดข้อมูล และวิธีอ่านค่าด้วยการเรียกใช้แล้ว นอกจากนี้คุณยังได้เห็น asReadonly() สำหรับเปิดให้เข้าถึงแบบอ่านอย่างเดียว ถัดไป: การอัปเดตค่า signal
เรียนรู้ 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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างและอ่านสัญญาณ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สัญญาณคืออะไร
- การสร้างและอ่านสัญญาณ
- การอัปเดตสัญญาณด้วย set และ update
- สัญญาณในเทมเพลต