Observables คืออะไรและ Angular ใช้ RxJS อย่างไร?

Observable (จากไลบรารี RxJS) แสดงถึง ลำธารของค่าต่างๆ เมื่อเวลาผ่านไป ที่คุณสามารถสมัครสมาชิกได้ Angular ใช้ RxJS อย่างแพร่หลาย — คำขอ HTTP เหตุการณ์เราเตอร์ ฟอร์ม และ EventEmitter ล้วนขึ้นอยู่กับ Observable — ดังนั้นการเข้าใจเรื่องเหล่านี้จึงจำเป็น

Observable vs Promise

Promise:    a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE

Observables สามารถส่งค่าหลายค่าได้ ทำงานเมื่อสมัครสมาชิกเท่านั้น และสามารถยกเลิกการสมัครสมาชิก (ยกเลิก) ได้ — ทำให้เหมาะสำหรับเหตุการณ์ ลำธาร และ HTTP ที่คุณอาจต้องการยกเลิก

การสมัครสมาชิก

import { HttpClient } from "@angular/common/http";

this.http.get<User[]>("/api/users").subscribe({
  next: (users) => this.users = users,  // each emitted value
  error: (err) => console.error(err),    // on error
  complete: () => console.log("done"),   // stream finished
});

ไม่มีอะไรเกิดขึ้นจนกว่าคุณจะ .subscribe() — Observable เป็นแบบเกียจคร่านมือ

ตัวดำเนินการแปลงลำธาร

import { map, filter, debounceTime } from "rxjs/operators";

this.searchInput.valueChanges.pipe(
  debounceTime(300),                    // wait for typing to pause
  filter(text => text.length > 2),      // ignore short queries
  map(text => text.trim()),             // transform
).subscribe(query => this.search(query));

ตัวดำเนินการ (โยงใน .pipe()) แปลงลำธารอย่างชัดเจน — debounce filter map ฯลฯ — แก้ปัญหา async ทั่วไป (เช่นค้นหา-ขณะ-พิมพ์) ได้อย่างสวยงาม

อันตรายของการรั่วไหลของหน่วยความจำ: ยกเลิกการสมัครสมาชิก

import { Subscription } from "rxjs";

private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks

ต้องล้างการสมัครสมาชิกด้วยตนเองใน ngOnDestroy มิฉะนั้นจะยังคงทำงานหลังจากที่คอมโพเนนต์หายไป — การรั่วไหลของหน่วยความจำ วิธีแก้ปัญหาทั่วไป: async pipe (ยกเลิกการสมัครสมาชิกโดยอัตโนมัติ) หรือ takeUntilDestroyed()

<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>

ทำไมถึงสำคัญ

RxJS Observables ถูกทอไปทั่ว Angular — คุณไม่สามารถใช้ HttpClient ฟอร์มแบบรีแอกทีฟ หรือเราเตอร์ได้หากไม่มี

การทำความเข้าใจการสมัครสมาชิก ตัวดำเนินการ และโดยเฉพาะอย่างยิ่ง การยกเลิกการสมัครสมาชิก (หรือใช้ async pipe เพื่อหลีกเลี่ยงการจัดการด้วยตนเอง) มีความสำคัญสูงสุด: เป็นทั้งแหล่งที่มาของพลังของ Angular สำหรับข้อมูล async และเป็นหนึ่งในสิ่งที่พลาดได้ง่ายที่สุด (รั่วไหลจากการสมัครสมาชิกที่ลืมไป)