إسقاط المحتوى في فتحة واحدة
أسقط المحتوى باستخدام ng-content
إسقاط المحتوى في فتحة واحدة درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
ما إسقاط المحتوى؟
يتيح إسقاط المحتوى للمكوّن استقبال ترميز من المكوّن الأب وعرضه داخل قالبه الخاص. وهو المكافئ في Angular لمفهوم "slots" في مكوّنات الويب.
يكتب المكوّن الأب المحتوى بين وسمَي المكوّن، ويحدد المكوّن موضع ظهور ذلك المحتوى.
لماذا تحتاج إليه؟
لا تعرف الأغلفة القابلة لإعادة الاستخدام، مثل البطاقات ومربعات الحوار واللوحات، محتواها مسبقًا. يجعل إسقاط المحتوى هذه الأغلفة حاويات مرنة.
- أنشئ البطاقة مرة واحدة واملأها بأي محتوى
- احتفظ بمنطق التخطيط داخل المكوّن
- احتفظ بالمحتوى لدى المستهلك
العنصر ng-content
يحدد العنصر <ng-content> الموضع الذي يوضع فيه المحتوى المُسقَط. يستخدم الإعداد ذو المنفذ الواحد عنصر <ng-content> واحدًا بالضبط، من دون سمة select.
@Component({
selector: 'app-card',
template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}استخدام المكوّن
يُسقَط كل ما يضعه المكوّن الأب بين وسمي المكوّن في المنفذ.
<app-card>
<h2>Hello</h2>
<p>This text is projected into the card.</p>
</app-card>منفذ واحد = مخرج واحد
مع وجود منفذ واحد غير مُسمّى، تنتقل جميع العقد المُسقطة إلى عنصر <ng-content> الوحيد. لا توجد تصفية؛ ويُحافَظ على الترتيب تمامًا كما كتبه المكوّن الأب.
المحتوى الافتراضي
يمكنك وضع ترميز احتياطي داخل <ng-content>. يعرض Angular هذا المحتوى الافتراضي فقط عندما لا يُسقط المستهلك أي محتوى في ذلك المنفذ.
<div class="card">
<ng-content>No content provided.</ng-content>
</div>تنسيق المحتوى المُسقَط
ينتمي المحتوى المُسقَط إلى واجهة عرض المكوّن الأب، ولذلك تُطبَّق عليه أنماط المكوّن الأب لا أنماط البطاقة. للوصول إلى العقد المُسقطة من البطاقة، استخدم ::ng-deep باعتدال أو اعتمد على الأنماط العامة.
المحتوى مقابل واجهة العرض
يميّز Angular بين الأبناء المحتوى (المُسقَطين إلى الداخل) وأبناء واجهة العرض (المُعلنين في القالب). وهذا مهم في الاستعلامات مثل contentChild وviewChild.
icon = contentChild(IconComponent);دورة الحياة: ngAfterContentInit
يصبح المحتوى المُسقَط متاحًا بعد تشغيل ngAfterContentInit(). استخدمها (أو ngAfterContentChecked) لقراءة أبناء المحتوى بأمان.
ngAfterContentInit() {
console.log('Projected content ready');
}مثال حقيقي على لوحة
إليك لوحة كاملة قابلة لإعادة الاستخدام. يتحكم المستهلك بالكامل في المحتوى الداخلي، بينما تتحكم اللوحة في الهيكل الخارجي.
@Component({
selector: 'app-panel',
template: '<section class="panel"><ng-content></ng-content></section>',
styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}خطأ شائع
إن وضع عنصر <ng-content> غير المُسمّى نفسه مرتين لا يكرر المحتوى. يُسقط Angular المحتوى فقط في آخر منفذ مطابق. استخدم إسقاط المنافذ المتعددة إذا احتجت إلى مناطق متعددة.
اختبار سريع
اختبر مدى فهمك لإسقاط المنفذ الواحد.
مراجعة
تعلّمت أن إسقاط المحتوى يستخدم <ng-content> لعرض الترميز الذي يوفّره المكوّن الأب داخل مكوّن آخر. يستخدم إسقاط المنفذ الواحد مخرجًا واحدًا غير مُسمّى، وينتمي المحتوى المُسقَط إلى واجهة عرض المكوّن الأب، ويصبح متاحًا في ngAfterContentInit.
الأسئلة الشائعة
هل درس «إسقاط المحتوى في فتحة واحدة» مجاني؟
نعم — نص درس «إسقاط المحتوى في فتحة واحدة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «إسقاط المحتوى في فتحة واحدة»؟
أسقط المحتوى باستخدام ng-content تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «إسقاط المحتوى في فتحة واحدة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إسقاط المحتوى في فتحة واحدة
- إسقاط المحتوى في فتحات متعددة باستخدام select
- ng-template و ng-container
- TemplateRef و ViewContainerRef