Angular Academy · บทเรียน

ซับเจกต์และ BehaviorSubject

กระจายค่าไปยังผู้รับหลายรายด้วยซับเจกต์

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

Subject คืออะไร

Subject เป็นทั้ง Observable และออบเซิร์ฟเวอร์ คุณสามารถสมัครรับข้อมูลจากมัน และส่งค่าเข้าไปด้วย next() ได้ นอกจากนี้ยังส่งข้อมูลแบบหลายผู้รับ กล่าวคือผู้สมัครทั้งหมดจะได้รับค่าที่ส่งออกมาเหมือนกัน

การสร้างและใช้งาน Subject

ผู้สมัครที่เพิ่มเข้ามาหลังจากมีการส่งค่าแล้วจะไม่ได้รับค่าที่ส่งไปก่อนหน้านี้

import { Subject } from 'rxjs';

const events$ = new Subject<string>();
events$.subscribe(v => console.log('A:', v));

events$.next('hello'); // A: hello
events$.subscribe(v => console.log('B:', v));
events$.next('world'); // A: world, B: world

Subject ส่งข้อมูลให้หลายผู้รับ

ต่างจาก Observable แบบเย็นที่ทำงานแยกกันสำหรับผู้สมัครแต่ละราย Subject จะแชร์การทำงานเดียวกัน ผู้สมัครทุกคนจะได้รับค่าเดียวกันในเวลาเดียวกัน

BehaviorSubject

BehaviorSubject ต้องมีค่าเริ่มต้นและจดจำค่าล่าสุดไว้ ผู้สมัครรายใหม่จะได้รับค่าปัจจุบันทันที

import { BehaviorSubject } from 'rxjs';

const count$ = new BehaviorSubject<number>(0);
count$.subscribe(v => console.log('A:', v)); // A: 0
count$.next(5);
count$.subscribe(v => console.log('B:', v)); // B: 5 (gets latest)

การอ่านค่าปัจจุบัน

BehaviorSubject เปิดให้เข้าถึงค่าปัจจุบันแบบพร้อมกันได้ผ่าน .value หรือ .getValue() ส่วน Subject ทั่วไปไม่มีความสามารถนี้

const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }

ใช้ Subject เป็นที่เก็บสถานะแบบง่าย

BehaviorSubject เป็นตัวเก็บสถานะขนาดเล็กที่นิยมใช้ในบริการของ Angular โดยเก็บสถานะ เปิดเผยเป็น Observable แบบอ่านอย่างเดียว และส่งการอัปเดตด้วย next

class CounterService {
  private count$ = new BehaviorSubject(0);
  readonly value$ = this.count$.asObservable();
  increment() { this.count$.next(this.count$.value + 1); }
}

ใช้ asObservable เพื่อห่อหุ้มข้อมูล

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

private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()

ReplaySubject

ReplaySubject จะส่งค่าที่ผ่านมาแล้วตามจำนวนที่กำหนดให้ผู้สมัครรายใหม่ เหมาะสำหรับแคชเหตุการณ์ N รายการล่าสุด

import { ReplaySubject } from 'rxjs';

const recent$ = new ReplaySubject<number>(2); // buffer last 2
recent$.next(1); recent$.next(2); recent$.next(3);
recent$.subscribe(v => console.log(v)); // 2, 3

Subject กับ BehaviorSubject

Subject: ไม่มีค่าเริ่มต้น ผู้สมัครที่มาทีหลังจะพลาดค่าที่ส่งไปก่อนหน้า
BehaviorSubject: มีค่าเริ่มต้น ผู้สมัครที่มาทีหลังจะได้รับค่าล่าสุด สำหรับสถานะของส่วนติดต่อผู้ใช้ โดยทั่วไป BehaviorSubject เป็นตัวเลือกที่เหมาะกว่า

การจบการทำงานของ Subject

เรียก complete() เพื่อจบการทำงานของ Subject หลังจากจบแล้ว ค่าที่ส่งด้วย next() จะถูกละเลย และระบบจะปล่อยผู้สมัครออก ควรจบการทำงานของ Subject ในบริการที่ถูกทำลายเสมอ

const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignored

Subject เชื่อมโลกคำสั่งกับโลกรีแอกทีฟ

Subject ช่วยเปลี่ยนเหตุการณ์แบบคำสั่ง (เช่น ตัวจัดการการคลิกปุ่มหรือข้อความจาก WebSocket) ให้เป็นกระแส Observable ที่ส่วนอื่นของแอปตอบสนองได้แบบประกาศ

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

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

สรุป: Subject และ BehaviorSubject

Subject คือกระแสแบบหลายผู้รับที่คุณสามารถส่งค่าเข้าไปได้

Subject: ไม่จดจำค่าที่ผ่านมา
BehaviorSubject: เก็บและส่งค่าล่าสุดซ้ำ และมี .value
ReplaySubject: ส่งค่า N รายการล่าสุดซ้ำ
เปิดเผยด้วย asObservable() เพื่อปกป้องสถานะ

ถัดไป: การยกเลิกการสมัครรับข้อมูลและหน่วยความจำรั่ว

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

บทเรียน “ซับเจกต์และ BehaviorSubject” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ซับเจกต์และ BehaviorSubject”

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

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

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

บทเรียน “ซับเจกต์และ BehaviorSubject” ใช้เวลานานแค่ไหน

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

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

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

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

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