محتويات الدورة

Angular / المتوسط / الدرس 10

التكامل بين RxJS والإشارات

اختر الحالة القيمية أو تيار الأحداث وأظهر الإلغاء وموضع الخطأ وأنشئ اشتراك الإشارة عند حد ملكية مدار.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى
في هذه الصفحة

أهداف الدرس

  • شرح الاشتراك وإلغاء الطلبات في التيارات العليا.
  • استخدام toSignal بقيمة أولية ومالك حقن.
  • اختبار السلوك الزمني دون شبكة حقيقية.

تختلف القيمة الحالية من تسلسل الأحداث

توفر الإشارة قراءة متزامنة للحالي ويصف observable تسلسلًا باشتراك، ولا يستبدل أحدهما الآخر دائمًا. يفيد RxJS للزمن والإلغاء والإعادة والدمج، وتفيد الإشارات للحالة والاشتقاق. أظهر مالك الاشتراك ولا تحول داخل كل getter. قد يشغل البارد منتجه لكل اشتراك؛ فحدّد استقلال العمل أو المشاركة أو حفظ الأحدث قبل اختيار الجسر.

فحص الإلغاء بوقت افتراضي

يستخدم الاختبار تيارات افتراضية باردة لا مؤقتًا أو HTTP أو متصفحًا. تصل قيمة قبل نتيجة الداخل الأول فتلغي switchMap اشتراكه ولا تظهر إلا اللاحقة. تحدد سلسلة الزمن القيمة والإكمال وتقارن الإشعارات قبل إعلان النجاح. يثبت ذلك الجدول الاصطناعي لا تراجع خادم عن كتابة ملغاة أو توقيت شبكة.

typescript فحص إلغاء مكتمل بوقت افتراضي
import { switchMap } from "rxjs";
import { TestScheduler } from "rxjs/testing";
const scheduler = new TestScheduler((actual, expected) => {
  if (JSON.stringify(actual) !== JSON.stringify(expected)) { throw new Error("schedule mismatch"); }
});
scheduler.run(({ cold, expectObservable }) => {
  const queries = cold("a-b----|", { a: "first", b: "second" });
  const result = queries.pipe(switchMap(query => cold("---x|", { x: query })));
  expectObservable(result).toBe("-----b-|", { b: "second" });
});
console.log("1 schedule passed");
الناتج المتوقع
1 schedule passed

تصدر second وحدها بالجدول ويظهر النجاح بعد صحة مقارنة الإشعارات.

إنشاء الجسر مرة تحت مالكه

تشترك toSignal وتعرض الأحدث. قدم قيمة أولية قبل الإصدار أو requireSync إذا ضمنت الفورية مختبرة. تحتاج افتراضيًا سياقًا أو حاقنًا لتنظيف الاشتراك مع المالك. ينشئ المثال سياقًا محليًا ومصدرًا محدودًا متزامنًا فيطبع ثلاثة بعد إصدارات of، وينهي destroy الملكية دون عرض مكوّن.

typescript جسر مكتمل محلي الملكية من observable إلى إشارة
import { Injector, runInInjectionContext } from "@angular/core";
import { toSignal } from "@angular/core/rxjs-interop";
import { of } from "rxjs";
const owner = Injector.create({ providers: [] });
const latest = runInInjectionContext(owner, () => toSignal(of(1, 2, 3), { initialValue: 0 }));
console.log(latest());
owner.destroy();
الناتج المتوقع
3

الأحدث المتزامن ثلاثة، ويفحص الجسر وملكيته لا عرضًا أو HTTP غير متزامنة.

اختيار موضع إنهاء الخطأ للتيار

قد ينهي الخطأ الاشتراك، ويتيح التقاطه داخل الطلب استعادة مع بقاء تيار الإدخال. قد ترمي قراءة toSignal خطأ المصدر؛ مثّل المتوقع قبل الجسر بدل استثناء بالقالب. اربط الاشتراك بـtakeUntilDestroyed وDestroyRef خصوصًا خارج السياق الضمني. لا تنشئ الجسر داخل getter متكرر؛ فقد يكرر العمل ولا يتراجع التنظيف عن أثر بعيد مثبت.

اختبار القيم والزمن والتنظيف منفصلة

استخدم التزامن للتحويل والوقت الافتراضي للسباق والإلغاء، ثم افحص العرض بعد مزامنته. اختبر التأخر والخطأ والتكرار والإتلاف. لا تعتبر shareReplay مخزنًا دائمًا تلقائيًا؛ يحدد الإعداد والعمر الاحتفاظ وإعادة الاشتراك. اختر العامل وفق الأحدث أو الترتيب أو تجاهل التداخل أو التوازي لا قاعدة لكل طلب.

الأخطاء الشائعة وإصلاحها

ينشئ getter اشتراكات toSignal متكررة.

لماذا يحدث؟
عومل إنشاء الجسر كقراءة بلا أثر.
كيف تصلحه؟
أنشئ جسرًا مملوكًا عند التهيئة.
كيف تتجنب تكراره؟
اختبر عدد الاشتراكات للعمل المكلف.

يمنع فشل بحث البحث اللاحق.

لماذا يحدث؟
انتهى التيار الخارجي عند حد خطأ غير مقصود.
كيف تصلحه؟
مثّل فشل الطلب عند الحد الداخلي المناسب.
كيف تتجنب تكراره؟
اختبر خطأ ثم مدخلًا صحيحًا.

وصف الإلغاء كتراجع بعيد.

لماذا يحدث؟
خُلط إلغاء الاشتراك بمعاملة خادم.
كيف تصلحه؟
عرّف هوية العمل وتسويته منفصلتين.
كيف تتجنب تكراره؟
ميّز ضمان التيار والخادم.

اختبر فهمك

1. أخّر القيمة الثانية حتى تصدر نتيجة الداخل الأول. ما التغير وكيف يحدث الاختبار؟

اعرض الحل المشروح

قد تظهر النتيجة الأولى قبل التحويل فلا تمحو switchMap ما سُلّم. حدّث الجدول والتوقع ليشملا إصدارها بإطاره. ميّز إلغاء غير المكتمل من تغيير الماضي واجعل التوقع تابعًا للوقت لا شعار الأحدث فقط.

2. استبدل of بمصدر يصدر لاحقًا. لماذا تلزم البداية أو معالجة undefined؟

اعرض الحل المشروح

قبل الإصدار لا توجد قيمة. توفر البداية حالة مؤقتة موثقة أو يفرض نوع undefined معالجتها. يكذب requireSync ما لم تثبت الفورية. اختبر المصدر المتأخر وعرض التحميل منفصلًا.

أهم ما تعلمته

  • استخدم التيارات للزمن والإشارات للحالي.
  • حدّد مالك كل جسر واشتراك.
  • اختبر الزمن بجدول مضبوط لا خدمة حقيقية.

المراجع الرسمية