0Pricing
Angular Academy · درس

TemplateRef و ViewContainerRef

اعرض القوالب ديناميكيًا

TemplateRef و ViewContainerRef درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

العرض命ي

قد تحتاج أحيانًا إلى عرض المحتوى برمجيًا بدلًا من عرضه تصريحيًا. يوفّر Angular كلاً من TemplateRef وViewContainerRef لهذا التحكم منخفض المستوى.

TemplateRef

يمثل TemplateRef مرجعًا إلى عنصر <ng-template>. وهو يمثل ترميزًا يمكنك إنشاؤه لاحقًا.

tpl = viewChild.required<TemplateRef<unknown>>('tpl');

ViewContainerRef

يمثل ViewContainerRef موضعًا في DOM يمكنك إرفاق واجهات العرض به. احقنه للتحكم في ما يُعرض هناك.

private vcr = inject(ViewContainerRef);

createEmbeddedView

اجمع بين الاثنين: ينشئ createEmbeddedView مثيلاً من TemplateRef داخل ViewContainerRef.

this.vcr.createEmbeddedView(this.tpl());

تمرير السياق

يمكنك تمرير كائن سياق باعتباره الوسيط الثاني، ويمكن الوصول إليه عبر متغيرات let-.

this.vcr.createEmbeddedView(this.tpl(), {
  $implicit: 'Hello',
  count: 3
});

مسح واجهات العرض

يزيل ViewContainerRef.clear() جميع واجهات العرض التي أنشأها. وهذه هي الطريقة لتبديل عرض المحتوى الديناميكي وإخفائه.

this.vcr.clear();

توجيه بنيوي مخصص

يُشغّل هذا النمط التوجيهات البنيوية المخصصة. يحقن التوجيه كلا المرجعين ويعرض المحتوى بشكل مشروط.

@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
  private tpl = inject(TemplateRef<unknown>);
  private vcr = inject(ViewContainerRef);
}

الاستجابة للإدخال

يتحكم setter في إدخال التوجيه بعمليتي الإنشاء والمسح، بحيث تظهر واجهة العرض أو تختفي.

@Input() set appUnless(condition: boolean) {
  if (!condition) {
    this.vcr.createEmbeddedView(this.tpl);
  } else {
    this.vcr.clear();
  }
}

الإدراج عند فهرس

يقبل createEmbeddedView فهرسًا للتحكم في ترتيب الإدراج بين واجهات العرض الشقيقة.

this.vcr.createEmbeddedView(this.tpl(), {}, 0);

createComponent

يمكن لـ ViewContainerRef أيضًا إنشاء المكوّنات ديناميكيًا باستخدام createComponent، وهو البديل الحديث لـ ComponentFactoryResolver.

const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');

التنظيف

يجب تنظيف واجهات العرض التي أُنشئت برمجيًا. يؤدي تدمير المكوّن المضيف إلى مسح ViewContainerRef تلقائيًا، لكن استدعِ clear() عند التبديل يدويًا.

اختبار سريع

اختبر مدى فهمك للعرض البرمجي.

مراجعة

تعلّمت أن TemplateRef هو مرجع إلى ترميز القالب، وأن ViewContainerRef هو نقطة إدراج في DOM، وأن createEmbeddedView يعرض أحدهما داخل الآخر. وتدعم هذه العناصر معًا التوجيهات البنيوية المخصصة والمكوّنات الديناميكية.

الأسئلة الشائعة

هل درس «TemplateRef و ViewContainerRef» مجاني؟

نعم — نص درس «TemplateRef و ViewContainerRef» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «TemplateRef و ViewContainerRef»؟

اعرض القوالب ديناميكيًا تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «TemplateRef و ViewContainerRef»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. إسقاط المحتوى في فتحة واحدة
  2. إسقاط المحتوى في فتحات متعددة باستخدام select
  3. ng-template و ng-container
  4. TemplateRef و ViewContainerRef
← العودة إلى Angular Academy