Angular Academy · درس

‏linkedSignal والأنماط المتقدمة

نسّقوا الإشارات التابعة بطريقة تفاعلية

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

المشكلة التي يحلها linkedSignal

قد تحتاج أحيانًا إلى حالة قابلة للكتابة تُجري أيضًا إعادة ضبط عند تغير مصدر معين. فـ computed العادي للقراءة فقط، والإشارة العادية لا تعيد الضبط تلقائيًا. يربط linkedSignal() بين الأمرين: حالة قابلة للكتابة مشتقة من مصدر.

linkedSignal الأساسي

مرّر دالة حساب. والنتيجة إشارة قابلة للكتابة تُعاد حسابها عند تغير مصدرها، مع إمكانية تعيين قيمتها يدويًا أيضًا.

import { signal, linkedSignal } from '@angular/core';

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

لماذا لا نستخدم signal فقط؟

ستحتفظ الإشارة العادية التي تُهيّأ مرة واحدة بقيمة قديمة بعد تغير المصدر. أما linkedSignal فيعيد الاشتقاق عند تغير المصدر، مع الاستمرار في السماح بالكتابة بين التغييرات.

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

صيغة source/computation

تفصل الصيغة المتقدمة بين source وcomputation، وتتيح الوصول إلى القيمة السابقة — وهذا مفيد للحفاظ على اختيار ما إذا كان لا يزال موجودًا.

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

الحفاظ على اختيار المستخدم

يحافظ نمط القيمة السابقة على اختيار المستخدم إذا ظل موجودًا بعد تحديث القائمة، وإلا فإنه يعود إلى قيمة افتراضية — وهي لمسة رائعة لتحسين تجربة المستخدم.

linkedSignal قابل للكتابة

على خلاف computed، يمكنك استدعاء .set() و.update() على linkedSignal. وتظل القيمة اليدوية سارية إلى أن يتغير المصدر مجددًا.

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

نمط: القوائم المنسدلة التابعة

الدولة -> المدينة: عند تغير الدولة، أعد ضبط المدينة إلى أول مدينة متاحة، مع السماح للمستخدم باختيار مدينة أخرى.

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

نمط: حالة واجهة المستخدم التفاؤلية

يمكن لـ linkedSignal الاحتفاظ بقيمة تفاؤلية مشتقة من بيانات الخادم، مع السماح للواجهة بتجاوزها فورًا وإعادة مزامنتها عند وصول بيانات جديدة.

الدمج مع التأثيرات

يمكنك الاستجابة لتغيرات linkedSignal باستخدام تأثير، مثلًا لحفظ الاختيار الحالي بشكل دائم.

const selected = linkedSignal(() => options()[0]);

effect(() => {
  localStorage.setItem('selected', selected());
});

متى لا تستخدم linkedSignal

إذا كانت القيمة المشتقة للقراءة فقط تمامًا، فاستخدم computed(). وإذا لم تكن القيمة بحاجة إلى إعادة الضبط من مصدر، فاستخدم signal() عادية. لا تستخدم linkedSignal إلا عندما تحتاج إلى كل من قابلية الكتابة وإعادة الضبط من المصدر.

الرسم البياني التفاعلي المتقدم

يشكّل signal -> computed -> linkedSignal -> effect خط أنابيب تفاعليًا متكاملًا: مدخلات أولية، واشتقاقات نقية، وحالة قابلة للكتابة وإعادة الضبط، وآثار جانبية — وكل ذلك من دون اشتراكات يدوية.

تحقق سريع

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

مراجعة: linkedSignal والأنماط المتقدمة

linkedSignal() تمنحك حالة قابلة للكتابة تُعاد تهيئتها من مصدر.

استخدم صيغة المصدر/الحساب للحفاظ على اختيار المستخدم.
مفيدة جدًا للقوائم المنسدلة المترابطة وواجهة المستخدم المتفائلة.
استخدم computed للحالة للقراءة فقط، وplain signal للحالة التي لا تُعاد تهيئتها.

لقد أتممت دورة Signals.

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

هل درس «‏linkedSignal والأنماط المتقدمة» مجاني؟

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

ماذا ستتعلم في «‏linkedSignal والأنماط المتقدمة»؟

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

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

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

كم من الوقت يستغرق درس «‏linkedSignal والأنماط المتقدمة»؟

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

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

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

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

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