Angular Academy · บทเรียน

Signal Stores ในบริการ

เก็บสถานะแอปไว้ในบริการที่อิงสัญญาณ

บทเรียน 1 จาก 413 ขั้นตอน

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

สัญญาณในฐานะสถานะ

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

การเก็บสัญญาณไว้ภายในบริการ @Injectable ช่วยให้คอมโพเนนต์หลายตัวใช้สถานะตอบสนองเดียวกันร่วมกันได้

คลังสัญญาณแบบพื้นฐาน

สร้างบริการและเก็บสถานะไว้ใน signal() เก็บสัญญาณที่เขียนได้ไว้เป็นส่วนตัว และเปิดเผยมุมมองแบบอ่านอย่างเดียว

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

@Injectable({ providedIn: 'root' })
export class CounterStore {
  private _count = signal(0);
  readonly count = this._count.asReadonly();

  increment() { this._count.update(c => c + 1); }
}

เหตุใดจึงใช้ providedIn root

providedIn: 'root' ทำให้บริการเป็นอินสแตนซ์เดียวทั่วทั้งแอป ทุกคอมโพเนนต์ที่ฉีดบริการนี้จะใช้สัญญาณอินสแตนซ์เดียวกันจริง ๆ ทำให้สถานะสอดคล้องกัน

การอ่านสัญญาณ

เรียกสัญญาณเหมือนฟังก์ชันเพื่ออ่านค่า ภายในแม่แบบ Angular จะติดตามการอ่านและอัปเดต DOM โดยอัตโนมัติเมื่อค่าเปลี่ยนแปลง

import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';

@Component({
  selector: 'app-counter',
  template: '<button (click)="store.increment()">{{ store.count() }}</button>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

asReadonly ปกป้องสถานะ

asReadonly() ส่งคืนสัญญาณที่อ่านได้แต่เขียนไม่ได้ คอมโพเนนต์จะไม่สามารถเรียก set() หรือ update() กับสัญญาณนี้โดยไม่ตั้งใจได้ ดังนั้นการเปลี่ยนแปลงทั้งหมดจะดำเนินผ่านเมธอดของคลัง

set เทียบกับ update

ใช้ set(value) เมื่อคุณมีค่าถัดไปอยู่แล้วโดยตรง ใช้ update(fn) เมื่อค่าถัดไปขึ้นอยู่กับค่าปัจจุบัน

private _user = signal<User | null>(null);

setUser(u: User) { this._user.set(u); }
clearUser() { this._user.set(null); }
touch() { this._user.update(u => u ? { ...u, seen: true } : u); }

สัญญาณหลายตัวต่อคลัง

คลังหนึ่งสามารถเก็บสัญญาณหลายตัวที่แทนส่วนต่าง ๆ ของสถานะได้ เก็บสัญญาณที่เขียนได้แต่ละตัวไว้เป็นส่วนตัว และเปิดเผยมุมมองแบบอ่านอย่างเดียวที่สอดคล้องกัน

private _items = signal<Item[]>([]);
private _loading = signal(false);

readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();

เมธอดห่อหุ้มตรรกะ

กฎทางธุรกิจควรอยู่ในเมธอดของคลัง ไม่ใช่ในคอมโพเนนต์ คอมโพเนนต์จะเรียกเมธอดที่สื่อเจตนา เช่น addToCart(item) แล้วให้คลังตัดสินใจว่าจะเปลี่ยนสถานะอย่างไร

addToCart(item: Item) {
  this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

ไม่จำเป็นต้องสมัครรับข้อมูล

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

การฉีดด้วย inject()

ฟังก์ชัน inject() ใช้ได้ในตัวสร้าง ตัวเริ่มต้นฟิลด์ และฟังก์ชันโรงงาน เป็นวิธีสมัยใหม่ในการดึงอินสแตนซ์ของคลัง

export class CartComponent {
  private store = inject(CartStore);
  items = this.store.items; // read-only signal
}

การทดสอบคลังสัญญาณ

คลังสัญญาณเป็นคลาสธรรมดา ดังนั้นการทดสอบจึงง่าย เพียงสร้างอินสแตนซ์ เรียกเมธอด แล้วอ่านค่าสัญญาณแบบทันที ไม่ต้องใช้การจัดการงานแบบอะซิงโครนัส

it('increments', () => {
  const store = new CounterStore();
  store.increment();
  expect(store.count()).toBe(1);
});

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

ทดสอบความเข้าใจเกี่ยวกับคลังสัญญาณ

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

คุณได้เรียนรู้การสร้างคลังที่ใช้สัญญาณ โดยเก็บสัญญาณที่เขียนได้ไว้เป็นส่วนตัว เปิดเผยมุมมองด้วย asReadonly() เปลี่ยนค่าผ่าน set/update ภายในเมธอด และฉีดอินสแตนซ์เดียวด้วย inject() ไม่ต้องสมัครรับข้อมูล ทดสอบได้ง่าย และใช้สถานะตอบสนองร่วมกันได้

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 38
บทเรียน: 144

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “Signal Stores ในบริการ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Signal Stores ในบริการ”

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

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

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

บทเรียน “Signal Stores ในบริการ” ใช้เวลานานแค่ไหน

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

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

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

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

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