ربط Signals وRxJS
اربط الإشارات وobservables باستخدام أدوات التشغيل البيني
ربط Signals وRxJS درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
عالمان تفاعليان
تجمع تطبيقات Angular بين الإشارات (المتزامنة والقائمة على السحب) وObservable في RxJS (التدفقات غير المتزامنة والقائمة على الدفع). وتربط حزمة @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 والقراءات المتزامنة
قد لا تُصدر Observables قيمة بشكل متزامن، لذلك تحتاج الإشارة إلى قيمة ابتدائية. قدّموا initialValue، أو استخدموا requireSync: true عندما يكون المصدر مضمونًا أن يُصدر قيمة فورًا، مثل BehaviorSubject.
value = toSignal(this.behaviorSubject$, { requireSync: true });استبدال async Pipe
غالبًا ما تحل toSignal محل async pipe. فبدلًا من 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 effect داخليًا، لذلك تُسلَّم الإصدارات في المهمة المصغّرة التالية، لا بشكل متزامن. وتُدمج التغييرات السريعة للإشارة بحيث تُحتفظ بأحدث قيمة فقط.
متى نستخدم كلًا منهما
استخدموا toObservable عند الحاجة إلى معاملات مرتبطة بالزمن أو معاملات عالية المستوى. واستخدموا toSignal لاستهلاك أي تدفق في القوالب ونماذج القراءة المحسوبة دون اشتراك يدوي.
التنظيف تلقائي
يربط كلا المساعدين اشتراكهما بدورة حياة سياق الحقن. وعند تدمير المكوّن أو الخدمة، يُلغى الاشتراك، مما يمنع التسربات دون الحاجة إلى unsubscribe() يدويًا.
اختبار سريع
تحققوا من معرفتكم بالتكامل البيني.
مراجعة
ربطتم بين الإشارات وRxJS: إذ تستهلك toSignal التدفقات كإشارات للقراءة فقط، مع initialValue/requireSync، بينما تعرض toObservable الإشارات كتدفقات لمعاملات RxJS. وتُنظَّف الاشتراكات تلقائيًا عبر سياق الحقن.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 38
- الدروس
- 144
الأسئلة الشائعة
هل درس «ربط Signals وRxJS» مجاني؟
نعم — نص درس «ربط Signals وRxJS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «ربط Signals وRxJS»؟
اربط الإشارات وobservables باستخدام أدوات التشغيل البيني تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «ربط Signals وRxJS»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.