ما هي Observables وكيف يستخدمها Angular مع RxJS؟

Question

Accepted Answer

يمثل **Observable** (من مكتبة **RxJS**) **تدفقاً من القيم عبر الزمن** يمكنك الاشتراك فيه. يستخدم Angular مكتبة RxJS بكثافة — طلبات HTTP وأحداث Router والنماذج و`EventEmitter` كلها قائمة على Observable — لذا فهم هذا المفهوم أساسي. ## Observable مقابل Promise ```text Promise: a SINGLE future value, eager, can't cancel Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE ``` يمكن للـ Observables أن تصدر عدة قيم، وتُنفذ فقط عند الاشتراك، ويمكن إلغاء الاشتراك فيها (إلغاء العملية) — مما يجعلها مثالية للأحداث والتدفقات و HTTP التي قد تريد إلغاء الاشتراك فيها. ## الاشتراك ```ts import { HttpClient } from "@angular/common/http"; this.http.get("/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 كسول (lazy). ## المعاملات تحول التدفقات ```ts 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()`) بتحويل التدفق بشكل تصريحي — تأخير، تصفية، map، إلخ. — وحل المشاكل الشائعة في البرمجة غير المتزامنة (مثل البحث أثناء الكتابة) بشكل أنيق. ## خطر تسريب الذاكرة: إلغاء الاشتراك ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks ``` يجب تنظيف الاشتراكات اليدوية في `ngOnDestroy`، وإلا فستستمر في التشغيل بعد حذف المكون — تسريب للذاكرة. الحلول الشائعة: **`async` pipe** (إلغاء اشتراك تلقائي)، أو `takeUntilDestroyed()`. ```html

``` ## لماذا هذا مهم مكتبة RxJS Observables منسوجة في جميع أنحاء Angular — لا يمكنك استخدام HttpClient أو النماذج التفاعلية أو الـ router بدونها. فهم الاشتراك والمعاملات وخاصة **إلغاء الاشتراك** (أو استخدام `async` pipe لتجنب الإدارة اليدوية) أمر حاسم: إنه مصدر قوة Angular للبيانات غير المتزامنة وفي نفس الوقت أحد أكثر الأخطاء الشائعة (تسريبات من الاشتراكات المنسية).