إسقاط المحتوى في فتحات متعددة باستخدام select
أسقط المحتوى في فتحات مسمّاة
إسقاط المحتوى في فتحات متعددة باستخدام select درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
منافذ متعددة
تحتاج مكوّنات كثيرة إلى عدة مناطق: رأس ونص وتذييل. يدعم Angular ذلك باستخدام إسقاط المنافذ المتعددة عبر سمة select في <ng-content>.
السمة select
تأخذ select محدد CSS. ولا يُسقط كل عنصر <ng-content select="..."> إلا العقد المطابقة لذلك المحدد.
<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>التحديد حسب السمة
تُعد محددات السمات النمط الأكثر شيوعًا لأنها واضحة عند قراءتها في ترميز المستهلك.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}استهلاك المنافذ المُسمّاة
يضع المستهلك سمة المطابقة على كل جزء من أجزاء المحتوى.
<app-card>
<h2 header>Title</h2>
<p body>Some body text here.</p>
</app-card>التحديد حسب العنصر أو الفئة
يمكنك أيضًا التحديد حسب اسم العنصر أو فئة CSS.
<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>منفذ التقاط الكل
يلتقط عنصر <ng-content> الذي لا يحتوي على أي select كل ما لم يطابق منفذًا مُسمّى. ضعه أخيرًا ليكون خيارًا احتياطيًا.
<ng-content select="[header]"></ng-content>
<ng-content></ng-content>الترتيب مهم
يقيّم Angular المنافذ بحسب ترتيبها في القالب. تنتقل كل عقدة مُسقطة إلى أول منفذ مطابق. ضع منفذ التقاط الكل بعد المحددات الخاصة حتى لا يلتقط كل شيء.
دمج المحددات
يمكن دمج محددات CSS، مثلًا يستهدف select="button[primary]" عنصر زر له سمة primary.
<ng-content select="button[primary]"></ng-content>مكوّن تخطيط
إليك بطاقة ذات منافذ للرأس والنص والتذييل، بالإضافة إلى منفذ لالتقاط الكل.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<section><ng-content></ng-content></section>' +
'<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}تُسقَط كل عقدة مرة واحدة
لا تطابق العقدة المُسقطة المعينة إلا منفذًا واحدًا، وتُعرض مرة واحدة بالضبط. لا توجد طريقة لاستنساخ العقدة نفسها في منفذين عبر الإسقاط.
التنسيق لكل منفذ
لأن كل منفذ يوجد في موضع DOM منفصل، يمكنك إحاطة المنافذ بحاويات منسّقة (للرأس والتذييل) لمنح كل منطقة مظهرها الخاص.
اختبار سريع
اختبر معرفتك بإسقاط المنافذ المتعددة.
مراجعة
تعلّمت إنشاء مكوّنات متعددة المنافذ باستخدام <ng-content select="...">. يمكن للمحددات استهداف السمات أو العناصر أو الفئات؛ والمنفذ غير المحدد يلتقط كل شيء؛ ويحدد الترتيب المنفذ الفائز.
الأسئلة الشائعة
هل درس «إسقاط المحتوى في فتحات متعددة باستخدام select» مجاني؟
نعم — نص درس «إسقاط المحتوى في فتحات متعددة باستخدام select» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «إسقاط المحتوى في فتحات متعددة باستخدام select»؟
أسقط المحتوى في فتحات مسمّاة تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «إسقاط المحتوى في فتحات متعددة باستخدام select»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إسقاط المحتوى في فتحة واحدة
- إسقاط المحتوى في فتحات متعددة باستخدام select
- ng-template و ng-container
- TemplateRef و ViewContainerRef