ما الإشارات؟
افهموا الإشارات بوصفها حاويات حالة تفاعلية
ما الإشارات؟ درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
ما الإشارات؟
الإشارة هي بنية تفاعلية أولية قُدّمت في Angular الحديث. وهي غلاف حول قيمة يمكنه إخطار المستهلكين المهتمين عند تغيّر تلك القيمة.
تجعل الإشارات التفاعلية في Angular واضحة وص granular وسهلة الفهم.
لماذا تهم التفاعلية؟
في إطار عمل لواجهات المستخدم، يجب أن تظل الشاشة متزامنة مع بياناتكم. فعندما تتغير البيانات، يجب أن يتحدّث العرض.
تمنح الإشارات Angular طريقة دقيقة لمعرفة ما الذي تغيّر بالضبط وما الذي يعتمد عليه، ولذلك لا يتم تحديث سوى الأجزاء المتأثرة من العرض.
المشكلة قبل ظهور الإشارات
كان Angular يعتمد سابقًا على Zone.js واكتشاف التغييرات على نطاق واسع؛ فبعد أي حدث غير متزامن، كان Angular يعيد فحص أجزاء كبيرة من شجرة المكوّنات.
ينجح ذلك، لكنه قد يكون مهدِرًا للموارد. وتتيح الإشارات تحديثات دقيقة دون فحص كل شيء.
الإشارة تحتفظ بقيمة
تصوّروا الإشارة على أنها صندوق ذكي يحيط بقيمة. يمكنكم قراءة ما بداخله واستبدال محتواه.
كما أن قراءة الإشارة تسجّل هوية القارئ، كي يمكن تحديث التوابع لاحقًا.
import { signal } from '@angular/core';
const count = signal(0);
// count is now a signal holding the number 0القراءة هي استدعاء دالة
فكرة أساسية: لقراءة إشارة، استدعُوها كما تستدعون دالة. وتُخبر الأقواس Angular بأنكم تقرأون القيمة الحالية.
const count = signal(0);
console.log(count()); // 0 <-- note the ()الإشارات متزامنة
قراءة الإشارة عملية متزامنة وتعيد دائمًا القيمة الحالية فورًا. ولا يوجد اشتراك أو async pipe أو إلغاء اشتراك يدوي يجب إدارته.
قابلة للكتابة مقابل محسوبة
الإشارة الأساسية التي تُنشأ باستخدام signal() تكون قابلة للكتابة، أي يمكنكم تغيير قيمتها.
توجد أيضًا إشارات محسوبة (قيم مشتقة) وتأثيرات (آثار جانبية)، وهي مبنية على الإشارات القابلة للكتابة.
الإشارات تتتبع التبعيات
عندما تقرأ قيمة محسوبة أو قالب إشارةً ما، يسجّل Angular تلك التبعية تلقائيًا.
لاحقًا، إذا تغيّرت الإشارة، يُعاد حساب التوابع المتأثرة فقط. وهذا ما يجعل الإشارات فعّالة.
تحديثات خالية من التناقضات
صُممت الإشارات لتكون خالية من التناقضات؛ إذ يرى المستهلكون دائمًا قيمة متسقة، ولا يتم إخطارهم بحالة وسيطة أو محدّثة جزئيًا.
وهذا يجعل الرسوم البيانية التفاعلية المعقدة قابلة للتنبؤ.
موضع الإشارات
توجد الإشارات ضمن @angular/core. ويمكنكم استيراد signal وcomputed وeffect من هناك.
يمكن استخدامها داخل المكوّنات أو الخدمات أو أي شيفرة TypeScript.
import { signal, computed, effect } from '@angular/core';الإشارات في مكوّن
من الأنماط الشائعة تعريف الإشارات كحقول للفئة داخل مكوّن، ثم قراءتها في القالب.
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '' })
export class CounterComponent {
count = signal(0);
}اختبار سريع: أساسيات الإشارات
لنتحقق من فهمكم لماهية الإشارة.
مراجعة: ما الإشارات؟
تعلّمتم أن الإشارة غلاف تفاعلي حول قيمة يُخطر المستهلكين عند تغيّرها. وتقرأون الإشارة باستدعائها باستخدام الأقواس، وتكون القراءات متزامنة، كما تتيح الإشارات تحديثات دقيقة وخالية من التناقضات.
بعد ذلك ستنشئون إشاراتكم الخاصة وتقرأونها.
الأسئلة الشائعة
هل درس «ما الإشارات؟» مجاني؟
نعم — نص درس «ما الإشارات؟» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «ما الإشارات؟»؟
افهموا الإشارات بوصفها حاويات حالة تفاعلية تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «ما الإشارات؟»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.