Angular Academy · पाठ

hostDirectives प्रॉपर्टी

कंपोनेंट होस्ट में डायरेक्टिव जोड़ें

पाठ 1, कुल 4 में से13 चरण

hostDirectives प्रॉपर्टी, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

डायरेक्टिव कंपोज़िशन एपीआई

डायरेक्टिव कंपोज़िशन एपीआई किसी कंपोनेंट या डायरेक्टिव को hostDirectives प्रॉपर्टी के माध्यम से घोषणात्मक रूप से अपने होस्ट एलिमेंट पर अन्य डायरेक्टिव लागू करने देता है। इससे इनहेरिटेंस के बिना पुन: उपयोग संभव होता है।

यह किस समस्या का समाधान करता है

पहले, डायरेक्टिव के व्यवहार का पुन: उपयोग करने के लिए आपको हर टेम्पलेट में डायरेक्टिव दोहराना पड़ता था या इनहेरिटेंस का उपयोग करना पड़ता था। hostDirectives व्यवहार को सीधे होस्ट पर संयोजित करता है।

मूल सिंटैक्स

कंपोनेंट के मेटाडेटा में hostDirectives सरणी के भीतर डायरेक्टिव की सूची दीजिए।

@Component({
  selector: 'app-menu',
  hostDirectives: [CdkTrapFocus],
  template: '<ng-content></ng-content>'
})
export class MenuComponent {}

क्या होता है

Angular हर app-menu होस्ट एलिमेंट पर अपने-आप CdkTrapFocus लागू करता है। उपयोगकर्ताओं को यह व्यवहार बिना किसी अतिरिक्त प्रयास के मिल जाता है; उन्हें स्वयं डायरेक्टिव जोड़ने की आवश्यकता नहीं होती।

आवश्यकताएँ

होस्ट डायरेक्टिव स्टैंडअलोन होने चाहिए। आपको डायरेक्टिव क्लास का सीधे संदर्भ देना होता है, उसके चयनकर्ता का नहीं।

कई होस्ट डायरेक्टिव

सभी व्यवहारों को सूचीबद्ध करके कई व्यवहारों को संयोजित कीजिए।

hostDirectives: [
  HighlightDirective,
  TooltipDirective,
  CdkTrapFocus
]

डायरेक्टिव पर लागू करना

किसी डायरेक्टिव में भी होस्ट डायरेक्टिव हो सकते हैं, जिससे आप परतदार और संयोज्य व्यवहार बना सकते हैं।

@Directive({
  selector: '[appCard]',
  hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}

जीवनचक्र क्रम

होस्ट के अपने कंस्ट्रक्टर तर्क से पहले होस्ट डायरेक्टिव इंस्टैंशिएट होते हैं, इसलिए होस्ट के आरंभ होने पर उनका सेटअप उपलब्ध रहता है।

निर्भरता इंजेक्शन

एलिमेंट इंजेक्टर के माध्यम से होस्ट डायरेक्टिव को होस्ट में और होस्ट को डायरेक्टिव में इंजेक्ट किया जा सकता है। इससे संयोजित व्यवहारों के बीच समन्वय संभव होता है।

private trap = inject(CdkTrapFocus);

टेम्पलेट में कोई बदलाव नहीं

मुख्य लाभ यह है कि app-menu के उपयोगकर्ताओं को CdkTrapFocus के बारे में जानने की आवश्यकता नहीं होती। व्यवहार कंपोनेंट की परिभाषा में समाहित रहता है।

इसका उपयोग कब करें

फ़ोकस ट्रैप, रिपल और विश्लेषण जैसे साझा व्यवहारों को कंपोनेंट या डायरेक्टिव में साफ़-सुथरे और पुन: उपयोग योग्य ढंग से बाँधने के लिए hostDirectives का उपयोग कीजिए।

त्वरित जाँच

hostDirectives की अपनी समझ जाँचिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने सीखा कि hostDirectives प्रॉपर्टी स्टैंडअलोन डायरेक्टिव को किसी कंपोनेंट या डायरेक्टिव के होस्ट एलिमेंट पर अपने-आप लागू करती है। इससे टेम्पलेट या इनहेरिटेंस के बिना कंपोज़िशन के माध्यम से व्यवहार का पुन: उपयोग संभव होता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “hostDirectives प्रॉपर्टी” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “hostDirectives प्रॉपर्टी” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“hostDirectives प्रॉपर्टी” में मैं क्या सीखूँगा?

कंपोनेंट होस्ट में डायरेक्टिव जोड़ें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“hostDirectives प्रॉपर्टी” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ