ng-template و ng-container
عرّف أجزاء القوالب واستضفها
ng-template و ng-container درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
قوالب لا تُعرض
يعرّف <ng-template> جزءًا من الترميز لا يُعرض حتى ينشئه شيء ما بشكل صريح. وهو الأساس الذي تقوم عليه التوجيهات البنيوية مثل *ngIf.
تعريف قالب
يبقى المحتوى داخل <ng-template> غير نشط. امنحه متغيرًا مرجعيًا لاستخدامه في موضع آخر.
<ng-template #empty>
<p>No items found.</p>
</ng-template>العرض باستخدام ngTemplateOutlet
استخدم ngTemplateOutlet لعرض قالب بحسب مرجعه.
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>لماذا ng-container؟
يُعد <ng-container> عنصر تجميع منطقيًا لا يُنشئ عنصر DOM. ويتيح لك تطبيق التوجيهات أو تجميع العقد من دون إضافة عنصر تغليف إضافي إلى DOM.
تجنب عناصر div التغليفية
من دون ng-container قد تضيف عنصر <div> عديم الفائدة لمجرد استضافة توجيه. يختفي ng-container من الناتج المعروض.
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>تجميع تدفق التحكم
يُعد ng-container مناسبًا جدًا لإحاطة كتل تدفق التحكم الجديدة من دون إضافة عناصر إلى DOM.
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>سياق القالب
يمكن للقوالب استقبال كائن سياق، وإتاحة القيم عبر متغيرات let-.
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>قيمة السياق الافتراضية
ترتبط قيمة السياق الخاصة $implicit بمتغير let- ليس له مفتاح معيّن.
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>القوالب عناصر أساسية
يكون #ref على عنصر <ng-template> من النوع TemplateRef. ويمكنك تمريره باعتباره @Input لكي يتيح المكوّن للمستهلكين تخصيص أجزاء من واجهة المستخدم.
emptyTemplate = input<TemplateRef<unknown>>();ng-container كمضيف
يفيد ng-container أيضًا كمضيف لمخرج المكوّنات أو القوالب الديناميكية، مع الحفاظ على نظافة DOM.
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>متى تستخدم كلًّا منهما؟
ng-template: ترميز مؤجل أو قابل لإعادة الاستخدام. ng-container: تجميع واستضافة التوجيهات من دون إضافة عناصر إلى DOM. وغالبًا ما يعملان معًا.
اختبار سريع
اختبر مدى فهمك لـ ng-template وng-container.
مراجعة
تعلّمت أن <ng-template> يحتفظ بترميز غير نشط قابل للإنشاء، ويُعرض عبر ngTemplateOutlet (مع سياق اختياري)، بينما يجمع <ng-container> العقد أو يستضيف التوجيهات من دون إضافة عناصر إلى DOM.
الأسئلة الشائعة
هل درس «ng-template و ng-container» مجاني؟
نعم — نص درس «ng-template و ng-container» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «ng-template و ng-container»؟
عرّف أجزاء القوالب واستضفها تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «ng-template و ng-container»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إسقاط المحتوى في فتحة واحدة
- إسقاط المحتوى في فتحات متعددة باستخدام select
- ng-template و ng-container
- TemplateRef و ViewContainerRef