0Pricing
Angular Academy · บทเรียน

การเชื่อมต่อ Signals และ RxJS

เชื่อมสัญญาณกับออบเซอร์เวเบิลด้วยการทำงานร่วมกัน

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

โลกแบบตอบสนองสองรูปแบบ

แอป Angular ผสาน signals (ทำงานแบบซิงโครนัสและดึงค่า) กับ RxJS Observables (ทำงานแบบอะซิงโครนัสและส่งค่าผ่านสตรีม) แพ็กเกจ @angular/core/rxjs-interop เชื่อมทั้งสองรูปแบบเข้าด้วยกันด้วย toSignal และ toObservable

พื้นฐาน toSignal

toSignal() สมัครรับ Observable และเปิดเผยค่าล่าสุดเป็นสัญญาณแบบอ่านอย่างเดียว โดยจะยกเลิกการสมัครรับโดยอัตโนมัติเมื่อบริบทการฉีดถูกทำลาย

import { toSignal } from '@angular/core/rxjs-interop';

clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}

initialValue และการอ่านแบบซิงโครนัส

Observable อาจไม่ส่งค่าแบบซิงโครนัส ดังนั้นสัญญาณจึงต้องมีค่าเริ่มต้น ให้ระบุ initialValue หรือใช้ requireSync: true เมื่อรับประกันว่าแหล่งข้อมูลจะส่งค่าทันที (เช่น BehaviorSubject)

value = toSignal(this.behaviorSubject$, { requireSync: true });

แทนที่ async Pipe

toSignal มักใช้แทน pipe async แทนที่จะอ่าน data$ | async คุณจะอ่าน data() ได้โดยตรง ซึ่งนำไปประกอบกับ computed() ได้อย่างราบรื่น

private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);

พื้นฐาน toObservable

toObservable() แปลงสัญญาณเป็น Observable ที่ส่งค่าเมื่อสัญญาณเปลี่ยนแปลง เหมาะเมื่อคุณต้องใช้ตัวดำเนินการของ RxJS เช่น debounceTime หรือ switchMap

import { toObservable } from '@angular/core/rxjs-interop';

query = signal('');
query$ = toObservable(this.query);

ไปป์ไลน์การค้นหาแบบหน่วงเวลา

รวมการทำงานทั้งสองทิศทางเข้าด้วยกัน: สัญญาณส่งต่อให้ toObservable จากนั้น RxJS หน่วงเวลาและสลับไปเรียก HTTP ส่วน toSignal จะแปลงผลลัพธ์กลับเป็นสัญญาณ

query = signal('');
results = toSignal(
  toObservable(this.query).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => this.api.search(q))
  ), { initialValue: [] }
);

บริบทการฉีด

ตัวช่วยทั้งสองต้องใช้บริบทการฉีด (เนื่องจากจัดการการสมัครรับที่ผูกกับวงจรชีวิต) ให้เรียกใช้เป็นตัวเริ่มต้นฟิลด์ หรือส่ง injector อย่างชัดเจนหากเรียกใช้ภายหลัง

constructor() {
  this.data = toSignal(this.source$); // ok: in constructor
}

การจัดการข้อผิดพลาด

หาก Observable ต้นทางเกิดข้อผิดพลาด toSignal จะส่งข้อผิดพลาดนั้นซ้ำเมื่ออ่านค่า ให้จัดการข้อผิดพลาดภายในไปป์ไลน์ด้วย catchError เพื่อให้สัญญาณยังคงมีค่าที่ใช้งานได้

results = toSignal(
  toObservable(this.query).pipe(
    switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
  ), { initialValue: [] }
);

จังหวะการทำงานของ toObservable

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

ควรใช้ตัวใดเมื่อใด

เลือกใช้ toObservable เมื่อต้องใช้ตัวดำเนินการตามเวลา หรือตัวดำเนินการระดับสูง เลือกใช้ toSignal เพื่อใช้สตรีมใด ๆ ในเทมเพลตและโมเดลข้อมูลที่คำนวณขึ้น โดยไม่ต้องสมัครรับด้วยตนเอง

การล้างข้อมูลทำโดยอัตโนมัติ

ตัวช่วยทั้งสองผูกการสมัครรับไว้กับวงจรชีวิตของบริบทการฉีด เมื่อคอมโพเนนต์หรือบริการถูกทำลาย การสมัครรับจะถูกยกเลิก จึงป้องกันการรั่วไหลได้โดยไม่ต้องใช้ unsubscribe() ด้วยตนเอง

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

ตรวจสอบความรู้เกี่ยวกับการทำงานร่วมกันของระบบ

สรุปทบทวน

คุณได้เชื่อมสัญญาณกับ RxJS: toSignal รับสตรีมเป็นสัญญาณแบบอ่านอย่างเดียว (โดยใช้ initialValue/requireSync) และ toObservable เปิดเผยสัญญาณเป็นสตรีมสำหรับตัวดำเนินการของ RxJS การสมัครรับจะถูกล้างโดยอัตโนมัติผ่านบริบทการฉีด

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

บทเรียน “การเชื่อมต่อ Signals และ RxJS” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเชื่อมต่อ Signals และ RxJS”

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

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

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

บทเรียน “การเชื่อมต่อ Signals และ RxJS” ใช้เวลานานแค่ไหน

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

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

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

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

  1. Signal Stores ในบริการ
  2. การอนุมานสถานะด้วย computed
  3. การอัปเดตสถานะแบบไม่เปลี่ยนแปลงค่าเดิม
  4. การเชื่อมต่อ Signals และ RxJS
← กลับไปที่ Angular Academy