العرض الشرطي باستخدام @if
اعرضوا المحتوى وفقًا لشرط باستخدام @if و@else
العرض الشرطي باستخدام @if درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
تدفق التحكم المضمّن
تتضمن قوالب Angular الحديثة كتل تدفق التحكم المضمّن المكتوبة باستخدام الرمز at. وهي تستبدل التوجيهات البنيوية الأقدم ولا تحتاج إلى أي عمليات استيراد.
كتلة if
تعرض كتلة at-if المحتوى بشكل مشروط. اكتبوا الرمز at متبوعًا بالكلمة if، ثم الشرط بين قوسين، والمحتوى بين قوسين معقوفين.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }استبدال ngIf
تستبدل هذه الكتلة التوجيه البنيوي القديم *ngIf. وبما أن الصياغة الجديدة جزء من لغة القوالب، فلا حاجة إلى استيراد أي شيء.
قراءة Signal في الشرط
يمكن أن يكون الشرط أي تعبير، بما في ذلك استدعاء signal.
// @if (count() > 0) {
// <p>You have items</p>
// }كتلة else
توفر كتلة at-else محتوى بديلًا عندما يكون الشرط خاطئًا. وتأتي مباشرةً بعد القوس المعقوف الختامي لكتلة if.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }سلاسل else if
يمكنكم ربط الشروط باستخدام at-else if، ثم إضافة at-else نهائية.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }تخزين ناتج الشرط
يمكن لكتلة at-if ربط ناتج الشرط بمتغير محلي باستخدام الكلمة المفتاحية as، وهو مفيد لتضييق القيم غير الفارغة.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }سبب استخدام الصياغة الجديدة
يتميز تدفق التحكم المضمّن بسهولة قراءة وفحص أنواع وكفاءة أكبر من التوجيهات البنيوية. كما أنه يتجنب الصياغة المختصرة والنجمة المستخدمة في التوجيهات القديمة.
لا حاجة إلى عنصر حاوية
على خلاف الأنماط القديمة، لا تحتاج كتلة at-if إلى عنصر تغليف أو ng-template. فالأقواس المعقوفة نفسها تحدد حدود المحتوى الشرطي.
تداخل الكتل
يمكن تداخل كتل تدفق التحكم بحرية. فقد تحتوي at-if على at-if أخرى أو at-for، وغير ذلك.
الدمج مع عمليات الربط
يمكنكم داخل كتلة at-if استخدام لغة القوالب كاملةً: إذ تعمل الاستيفاءات وربط الخصائص وربط الأحداث بصورة طبيعية.
تحقق سريع: الشروط
صياغة الشروط الجديدة.
مراجعة: الشروط
تعلّمتم استخدام كتلة at-if للعرض الشرطي، مع at-else وat-else if للبدائل، والكلمة المفتاحية as لالتقاط الناتج. وهي تستبدل star-ngIf ولا تحتاج إلى أي استيراد. التالي: التكرار باستخدام at-for.
الأسئلة الشائعة
هل درس «العرض الشرطي باستخدام @if» مجاني؟
نعم — نص درس «العرض الشرطي باستخدام @if» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «العرض الشرطي باستخدام @if»؟
اعرضوا المحتوى وفقًا لشرط باستخدام @if و@else تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «العرض الشرطي باستخدام @if»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- العرض الشرطي باستخدام @if
- التكرار باستخدام @for
- التبديل باستخدام @switch
- التحميل المؤجّل باستخدام @defer