التبديل باستخدام @switch
اختاروا القوالب باستخدام @switch و@case
التبديل باستخدام @switch درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
التبديل باستخدام switch
تختار كتلة at-switch فرعًا واحدًا من بين عدة فروع بناءً على قيمة، مثل عبارة switch. وهي تعمل مع at-case وat-default.
الصياغة الأساسية لـ switch
اكتبوا at-switch مع التعبير بين قوسين، ثم كتلة at-case واحدة أو أكثر، بحيث تحتوي كل منها على قيمة مطابقة.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }كتلة case
تأخذ كل at-case قيمة بين قوسين. ويُعرض أول case تتساوى قيمته تطابقًا تامًا مع تعبير switch.
كتلة default
تُعرض كتلة at-default عندما لا تتطابق أي case. وهي اختيارية، لكن يُنصح بها لاكتمال المعالجة.
المساواة التامة
تستخدم المطابقة المساواة التامة (===). تأكدوا من أن قيم case من النوع نفسه لتعبير switch.
التبديل باستخدام Signal
يمكن أن يكون تعبير switch استدعاءً لـ signal، وبذلك تتحدّث الواجهة عند تغيّر signal.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }استبدال ngSwitch
تستبدل هذه الكتلة مجموعة التوجيهات القديمة ngSwitch وstar-ngSwitchCase وstar-ngSwitchDefault، مع صياغة أوضح ومن دون استيراد.
يُعرض فرع واحد فقط
تعرض at-switch فرعًا مطابقًا واحدًا بالضبط، أو الفرع الافتراضي. ولا تكون الفروع الأخرى موجودة في DOM إطلاقًا.
التعدادات والثوابت
يمكن للحالات مقارنة قيمها بأعضاء التعداد أو بالثوابت المكشوفة على المكوّن، مما يحسّن سهولة القراءة وأمان الأنواع.
التداخل داخل switch
يمكن أن تحتوي كل كتلة case على أي محتوى للقالب، بما في ذلك كتل تدفق تحكم أخرى مثل at-if وat-for.
متى تستخدمون switch
فضّلوا at-switch على سلسلة طويلة من at-if وat-else if عند التفرّع بناءً على قيمة واحدة لها عدة حالات منفصلة.
تحقق سريع: switch
البديل في كتلة switch.
مراجعة: التبديل
تعلّمتم استخدام كتلة at-switch مع فروع at-case المطابقة بالمساواة التامة، وبديل at-default الاختياري. وهي تستبدل ngSwitch وتعرض فرعًا واحدًا بالضبط. التالي: التحميل المؤجل باستخدام at-defer.
الأسئلة الشائعة
هل درس «التبديل باستخدام @switch» مجاني؟
نعم — نص درس «التبديل باستخدام @switch» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «التبديل باستخدام @switch»؟
اختاروا القوالب باستخدام @switch و@case تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «التبديل باستخدام @switch»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- العرض الشرطي باستخدام @if
- التكرار باستخدام @for
- التبديل باستخدام @switch
- التحميل المؤجّل باستخدام @defer