Angular Academy · درس

تنسيق Host وHost-Context

نسّقوا عنصر المضيف الخاص بالمكوّن

الدرس 3 من 413 خطوة

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

تنسيق عنصر المضيف

يُعرض المكوّن داخل عنصر المضيف الخاص به (وهو وسم المحدِّد الخاص به). تتيح الفئة الزائفة الخاصة :host تنسيق هذا العنصر من CSS الخاص بالمكوّن.

المحدِّد :host

استخدموا :host لاستهداف عنصر المكوّن نفسه، مثلًا لمنحه طريقة عرض ومسافات.

/* card.component.css */
:host {
  display: block;
  padding: 16px;
}

لماذا نحتاج إلى :host

من دون :host، لا يمكنكم تنسيق عنصر المضيف من داخل المكوّن، لأن المحدِّدات المحصورة تطابق العناصر الموجودة داخل القالب فقط.

:host مع شرط

يمكنكم تمرير محدِّد إلى :host() لتنسيق المضيف فقط عند مطابقته له، مثل امتلاكه فئة.

:host(.active) {
  border: 2px solid green;
}

<!-- applies when host has class active -->
<app-card class="active"></app-card>

ربط فئة بالمضيف

اجمعوا بين :host() وربط فئة المضيف لتنسيق المكوّن استنادًا إلى حالته الخاصة.

@Component({
  selector: "app-card",
  host: { "[class.selected]": "isSelected" },
  styleUrl: "./card.component.css"
})
export class CardComponent {
  isSelected = true;
}

المحدِّد :host-context

تنسّق :host-context() المكوّن استنادًا إلى شرط في أي عنصر سلف، وليس في المضيف نفسه. وهي مثالية لتطبيق السمات.

:host-context(.dark-theme) {
  background: #222;
  color: #eee;
}

مثال على تطبيق سمة

إذا كان لأحد العناصر الأب في التسلسل الهرمي الفئة dark-theme، تُطبّق القاعدة، مما يتيح لعنصر سلف واحد تبديل مظهر المكوّنات المتداخلة.

<body class="dark-theme">
  <app-card></app-card>
  <!-- card uses dark styles -->
</body>

:host مقارنةً بـ :host-context

يتحقق :host من عنصر المكوّن نفسه، بينما يتحقق :host-context من العناصر السلف. استخدموا host لحالة العنصر نفسه، وhost-context للسياق الموروث مثل السمات.

الدمج مع العناصر المتفرعة

يمكنكم ربط :host-context بمحدِّدات العناصر المتفرعة لتنسيق العناصر الداخلية استنادًا إلى سياق العنصر السلف.

:host-context(.compact) .title {
  font-size: 12px;
}

الإعدادات الافتراضية لعرض المضيف

تكون عناصر المضيف المخصّصة مضمنة افتراضيًا. ويُعد تعيين display: block على :host قاعدة أولى شائعة لضمان تصرف التخطيط بصورة متوقعة.

:host {
  display: block;
}

الاستخدامات العملية

استخدموا تنسيق المضيف للتحكم في الإطار الخارجي للمكوّن، والاستجابة لحالته الخاصة، والتكيف مع فئات السمات المحيطة، مع إبقاء التنسيقات معزولة ومرنة في الوقت نفسه.

تحقق سريع

اختبروا مدى فهمكم لتنسيق المضيف.

أجب عليها في الدرس التفاعلي

مراجعة

استخدموا :host لتنسيق عنصر المكوّن نفسه وحالته، واستخدموا :host-context() للاستجابة لفئات العناصر السلف عند تطبيق السمات. ويُعد تعيين display: block على المضيف قيمة افتراضية مفيدة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

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

الدورات: 38
الدروس: 144

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «تنسيق Host وHost-Context» مجاني؟

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

ماذا ستتعلم في «تنسيق Host وHost-Context»؟

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

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

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

كم من الوقت يستغرق درس «تنسيق Host وHost-Context»؟

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

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

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

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

← العودة إلى Angular Academy