Angular Academy · บทเรียน

linkedSignal และรูปแบบขั้นสูง

ประสานสัญญาณที่มีความเกี่ยวข้องกันแบบรีแอกทีฟ

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

ปัญหาที่ linkedSignal แก้ไข

บางครั้งคุณต้องการสถานะที่เขียนค่าได้และรีเซ็ต เมื่อแหล่งข้อมูลบางอย่างเปลี่ยนแปลง ค่าคำนวณทั่วไปเป็นแบบอ่านอย่างเดียว ส่วนสัญญาณทั่วไปจะไม่รีเซ็ตโดยอัตโนมัติ linkedSignal() ช่วยเชื่อมช่องว่างนี้ โดยเป็นสถานะที่เขียนค่าได้และได้มาจากแหล่งข้อมูล

linkedSignal พื้นฐาน

ส่งการคำนวณเข้าไป ผลลัพธ์คือสัญญาณที่เขียนค่าได้ ซึ่งจะคำนวณใหม่เมื่อแหล่งข้อมูลเปลี่ยนแปลง และยังสามารถกำหนดค่าด้วยตนเองได้

import { signal, linkedSignal } from '@angular/core';

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

ทำไมไม่ใช้สัญญาณทั่วไป

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

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

รูปแบบ source/computation

รูปแบบขั้นสูงจะแยก source ออกจาก computation และเปิดให้เข้าถึงค่าก่อนหน้า ซึ่งมีประโยชน์สำหรับเก็บตัวเลือกเดิมไว้หากตัวเลือกนั้นยังมีอยู่

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

การเก็บตัวเลือกของผู้ใช้

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

linkedSignal เขียนค่าได้

ต่างจากค่าคำนวณ คุณสามารถเรียกใช้ .set() และ .update() กับ linkedSignal ได้ ค่าที่กำหนดด้วยตนเองจะคงอยู่จนกว่าแหล่งข้อมูลจะเปลี่ยนแปลงอีกครั้ง

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

รูปแบบ: เมนูแบบเลื่อนลงที่ขึ้นต่อกัน

ประเทศ -> เมือง: เมื่อประเทศเปลี่ยน ให้รีเซ็ตเมืองเป็นเมืองแรกที่มีอยู่ แต่ยังอนุญาตให้ผู้ใช้เลือกเมืองอื่นได้

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

รูปแบบ: สถานะส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดี

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

การใช้ร่วมกับเอฟเฟกต์

คุณสามารถตอบสนองต่อการเปลี่ยนแปลงของ linkedSignal ด้วยเอฟเฟกต์ได้ เช่น เพื่อบันทึกตัวเลือกปัจจุบัน

const selected = linkedSignal(() => options()[0]);

effect(() => {
  localStorage.setItem('selected', selected());
});

เมื่อใดที่ไม่ควรใช้ linkedSignal

หากค่าที่ได้จากการคำนวณเป็นแบบอ่านอย่างเดียวล้วน ๆ ให้ใช้ computed() หากค่าไม่จำเป็นต้องรีเซ็ตจากแหล่งข้อมูล ให้ใช้ signal() ทั่วไป ควรเลือกใช้ linkedSignal เฉพาะเมื่อคุณต้องการทั้งการเขียนค่าได้และการรีเซ็ตจากแหล่งข้อมูล

กราฟปฏิกิริยาขั้นสูง

signal -> computed -> linkedSignal -> effect ก่อให้เกิดกระบวนการปฏิกิริยาที่สมบูรณ์ ได้แก่ อินพุตดิบ การคำนวณที่บริสุทธิ์ สถานะที่เขียนค่าได้และรีเซ็ตได้ และผลข้างเคียง ทั้งหมดนี้ทำได้โดยไม่ต้องสมัครรับข้อมูลด้วยตนเอง

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับ linkedSignal

สรุป: linkedSignal และรูปแบบขั้นสูง

linkedSignal() ให้สถานะที่เขียนค่าได้และรีเซ็ตจากแหล่งข้อมูล

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

คุณเรียนหลักสูตร Signals จบแล้ว

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

บทเรียน “linkedSignal และรูปแบบขั้นสูง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “linkedSignal และรูปแบบขั้นสูง”

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

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

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

บทเรียน “linkedSignal และรูปแบบขั้นสูง” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Angular Academy