Angular Academy · درس

Subjects وBehaviorSubject

بثّوا القيم إلى عدة مشتركين باستخدام Subjects

Subjects وBehaviorSubject درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

ما هو Subject

إنّ Subject هو Observable وObserver في الوقت نفسه. يمكنك الاشتراك فيه، كما يمكنك دفع القيم إليه باستخدام 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

تدعم Subjects الإرسال إلى عدة مشتركين

على خلاف 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(). أما Subjects العادية فلا توفر ذلك.

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() وتحرير المشتركين. احرص دائمًا على إكمال Subjects في الخدمات التي يتم تدميرها.

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

تصل Subjects بين الأسلوب الإجرائي والتفاعلي

تتيح لك Subjects تحويل الأحداث الإجرائية، مثل معالج النقر على زر أو رسالة WebSocket، إلى تدفق observable يمكن لبقية تطبيقك التفاعل معه بطريقة تصريحية.

تحقق سريع

اختبر مدى فهمك لـ subjects.

مراجعة: Subjects وBehaviorSubject

Subjects هي تدفقات متعددة الإرسال يمكنك دفع القيم إليها.

Subject: لا يحتفظ بذاكرة للقيم السابقة.
BehaviorSubject: يحتفظ بأحدث قيمة ويعيد إصدارها، ويحتوي على .value.
ReplaySubject: يعيد إصدار آخر N من القيم.
اعرضه باستخدام asObservable() لحماية الحالة.

التالي: إلغاء الاشتراك وتسربات الذاكرة.

الأسئلة الشائعة

هل درس «Subjects وBehaviorSubject» مجاني؟

نعم — نص درس «Subjects وBehaviorSubject» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «Subjects وBehaviorSubject»؟

بثّوا القيم إلى عدة مشتركين باستخدام Subjects تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «Subjects وBehaviorSubject»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy