إتاحة المدخلات والمخرجات
أتح مدخلات ومخرجات توجيه المضيف
إتاحة المدخلات والمخرجات درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
كشف واجهات برمجة التطبيقات المركبة
عند تركيب توجيه عبر hostDirectives، تكون مدخلاته ومخرجاته مخفية افتراضيًا. وتتيح واجهة برمجة التركيب كشف مدخلات ومخرجات محددة ضمن واجهة برمجة التطبيقات العامة للمضيف.
صيغة الكائن
بدلًا من إدراج الفئة فقط، استخدموا كائنًا يحتوي على مصفوفات directive وinputs وoutputs.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]إتاحة إدخال
يؤدي إدراج اسم إدخال ضمن inputs إلى إتاحته للربط بعنصر المضيف من جانب المستهلكين.
<app-button tooltipText="Save changes"></app-button>إتاحة مخرج
يؤدي إدراج مخرج إلى جعل المضيف يعيد إصدار أحداث ذلك التوجيه.
<app-button (tooltipShown)="onShown()"></app-button>إعادة التسمية عند الإتاحة
استخدم الصيغة publicName: internalName لإعادة تسمية إدخال أو مخرج عند إتاحته.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."إعادة تسمية المخرجات
تُعاد تسمية المخرجات بالطريقة نفسها.
outputs: ['tooltipShown: shown']
// template: (shown)="..."لماذا نخفيها افتراضيًا؟
يضمن إخفاء المدخلات والمخرجات المركبة أن تكون واجهة برمجة المضيف مقصودة وواضحة. أنتم تتيحون فقط ما يناسب المستهلكين، وتتجنبون كشف تفاصيل التوجيه الداخلية.
الجمع مع المدخلات الخاصة
يمكن أن تكون للمضيف مدخلاته الخاصة إلى جانب المدخلات المتاحة؛ إذ يدمجها Angular في واجهة برمجة عامة واحدة للعنصر.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}تعارضات الأسماء
إذا تعارض اسم إدخال متاح مع إدخال خاص بالمضيف، فإن إعادة التسمية تتجنب التعارض وتوضح المقصود.
عمليات الربط ثنائية الاتجاه
لدعم الربط ثنائي الاتجاه عبر التركيب، أتيحوا الإدخال ومخرج Change المطابق له، مع الحفاظ على اتساق الأسماء.
أفضل ممارسة
أتيحوا الواجهة الأصغر والأسماء الأوضح التي يحتاج إليها المستهلكون. أعيدوا تسمية الأسماء الداخلية بما يلائم مفردات مكونكم، لا مفردات التوجيه الأساسي.
اختبار سريع
اختبروا فهمكم لإتاحة المدخلات والمخرجات.
خلاصة
تعلمتم أن الصيغة الكائنية لـ hostDirectives تتيح مدخلات inputs ومخرجات outputs محددة ضمن واجهة برمجة المضيف، مع إمكانية إعادة تسميتها باستخدام publicName: internalName، مما يحافظ على واجهة عامة مقصودة.
الأسئلة الشائعة
هل درس «إتاحة المدخلات والمخرجات» مجاني؟
نعم — نص درس «إتاحة المدخلات والمخرجات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «إتاحة المدخلات والمخرجات»؟
أتح مدخلات ومخرجات توجيه المضيف تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «إتاحة المدخلات والمخرجات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- خاصية hostDirectives
- إتاحة المدخلات والمخرجات
- بناء سلوكيات قابلة لإعادة الاستخدام
- التركيب أم الوراثة