خاصية hostDirectives
أرفق التوجيهات بمضيف المكوّن
خاصية hostDirectives درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
واجهة برمجة تركيب التوجيهات
تتيح واجهة برمجة تركيب التوجيهات للمكوّن أو التوجيه تطبيق توجيهات أخرى على عنصره المضيف بصورة تصريحية، عبر الخاصية hostDirectives. ويتيح ذلك إعادة الاستخدام دون الوراثة.
المشكلة التي تحلها
في السابق، لإعادة استخدام سلوك توجيه ما، كنتم تكررون التوجيه في كل قالب أو تستخدمون الوراثة. أما hostDirectives فتركّب السلوكيات مباشرةً على المضيف.
الصياغة الأساسية
أدرجوا التوجيهات في مصفوفة hostDirectives ضمن بيانات تعريف المكوّن.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}ما الذي يحدث؟
تطبّق Angular التوجيه CdkTrapFocus تلقائيًا على كل عنصر مضيف app-menu. ويحصل المستخدمون على السلوك مباشرةً دون إضافة التوجيه بأنفسهم.
المتطلبات
يجب أن تكون توجيهات المضيف standalone. وعليكم الإشارة إلى فئة التوجيه مباشرةً، لا إلى المحدد الخاص بها.
توجيهات مضيف متعددة
ركّبوا عدة سلوكيات بإدراجها جميعًا.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]التطبيق على توجيه
يمكن أن يحتوي التوجيه أيضًا على توجيهات مضيف، مما يتيح لكم إنشاء سلوكيات متراكبة قابلة للتركيب.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}ترتيب دورة الحياة
تُنشأ توجيهات المضيف قبل منطق المُنشئ الخاص بالمضيف، ولذلك يكون إعدادها متاحًا عند تهيئة المضيف.
حقن الاعتماديات
يمكن حقن توجيهات المضيف في المضيف والعكس عبر حاقن العنصر، مما يتيح التنسيق بين السلوكيات المركبة.
private trap = inject(CdkTrapFocus);لا تغييرات على القالب
الفائدة الأساسية هي أن مستخدمي app-menu لا يحتاجون إلى معرفة CdkTrapFocus. إذ يُغلّف السلوك داخل تعريف المكوّن.
متى تستخدمونه؟
استخدموا hostDirectives لتجميع السلوكيات المشتركة، مثل حبس التركيز والتأثير المتموّج والتحليلات، داخل المكوّنات أو التوجيهات بطريقة واضحة وقابلة لإعادة الاستخدام.
اختبار سريع
اختبروا مدى فهمكم لـ hostDirectives.
مراجعة
تعلّمتم أن الخاصية hostDirectives تطبّق التوجيهات المستقلة تلقائيًا على العنصر المضيف لمكوّن أو توجيه، مما يتيح إعادة استخدام السلوك عبر التركيب دون تغيير القوالب أو استخدام الوراثة.
الأسئلة الشائعة
هل درس «خاصية hostDirectives» مجاني؟
نعم — نص درس «خاصية hostDirectives» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «خاصية hostDirectives»؟
أرفق التوجيهات بمضيف المكوّن تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «خاصية hostDirectives»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- خاصية hostDirectives
- إتاحة المدخلات والمخرجات
- بناء سلوكيات قابلة لإعادة الاستخدام
- التركيب أم الوراثة