कोणीय में अपने स्वयं के घटकों को कैसे बनाएं और उपयोग करें

एक घटक कोणीय अनुप्रयोग के सबसे महत्वपूर्ण निर्माण खंडों में से एक है। घटक कोड के पुन: प्रयोज्य बिट्स हैं जो आपकी वेबसाइट के कुछ अनुभाग बनाते हैं।

आपके द्वारा बनाए जा सकने वाले घटकों के उदाहरणों में छोटे UI तत्व जैसे बटन या कार्ड शामिल हैं। उनमें बड़े UI तत्व जैसे साइडबार, नेविगेशन बार या संपूर्ण पृष्ठ शामिल हो सकते हैं।

कोणीय में घटकों का उपयोग करना

जब आप एक कोणीय अनुप्रयोग में घटक बनाते हैं, तो आप उन्हें अन्य घटकों के भीतर उपयोग कर सकते हैं। उदाहरण के लिए, आप एक बड़े UI कार्ड तत्व के लिए एक घटक बना सकते हैं। फिर आप इस घटक को नियमित HTML टैग के रूप में कहीं भी उपयोग कर सकते हैं:

<ऐप-नया-घटक></app-new-component>

चूंकि घटक कोड के पुन: प्रयोज्य बिट्स हैं, इसलिए आप चर भी पास कर सकते हैं ताकि प्रत्येक उदाहरण के लिए डेटा अलग हो। आप पृष्ठों के लिए घटक भी बना सकते हैं, और आप तदनुसार उनका उपयोग करके उन्हें रूट कर सकते हैं ऐप-रूटिंग.मॉड्यूल.ts फ़ाइल।

आप अपने घटकों को अपने एप्लिकेशन की संरचना के आधार पर डिज़ाइन कर सकते हैं, और आप अपनी कार्यक्षमता को कितना अलग करना चाहते हैं।

एक घटक कैसे बनाएं

आप का उपयोग कर सकते हैं एनजीकमांड उत्पन्न करें एक नया घटक बनाने के लिए।

1. कोई नया बनाएं कोणीय अनुप्रयोग का उपयोग करते हुए एनजी न्यू या किसी मौजूदा को खोलें।
2. कमांड प्रॉम्प्ट या टर्मिनल खोलें। वैकल्पिक रूप से, यदि आपके पास अपना कोणीय अनुप्रयोग a. में खुला है IDE जैसे विजुअल स्टूडियो कोड, आप अंतर्निर्मित टर्मिनल का उपयोग कर सकते हैं।
3. टर्मिनल में, प्रोजेक्ट के रूट फ़ोल्डर के स्थान पर नेविगेट करें। उदाहरण के लिए:

   सीडी C:\Users\Sharl\Desktop\Angular-Application

4. चलाएँ एनजी उत्पन्न घटक कमांड, उसके बाद नए घटक का नाम:

   एनजी उत्पन्न घटक यूआई-कार्ड

5. नया घटक एक नए फ़ोल्डर में बनाया जाएगा, के अंदर src/app निर्देशिका।

कोणीय घटक में सामग्री कैसे जोड़ें

कोणीय प्रत्येक घटक को HTML, CSS, टाइपस्क्रिप्ट और परीक्षण विशिष्टता फ़ाइल के साथ बनाता है।

• एचटीएमएल फ़ाइल घटक की HTML सामग्री को संग्रहीत करता है।
• सीएसएस फ़ाइल घटक की शैली को संग्रहीत करता है।
• परीक्षण विशिष्टता (spec.ts) फ़ाइल घटक के लिए किसी भी इकाई परीक्षण को संग्रहीत करता है।
• टाइपस्क्रिप्ट फ़ाइल तर्क और कार्यक्षमता को संग्रहीत करता है जो घटक को परिभाषित करता है।

कस्टम ui-card घटक में कुछ सामग्री जोड़ें।

1. खुला हुआ src/app/ui-card/ui-card.component.html, और घटक के HTML को अपडेट करें। सुनिश्चित करें कि आपके पास नाम के फ़ोल्डर में उसी नाम का उपयोग करने वाली एक छवि है स्रोत/संपत्ति/छवियां आपके कोणीय अनुप्रयोग में। की सामग्री बदलें ui-card.component.html निम्नलिखित के साथ:

   <डिव क्लास ="कार्ड">
   <आईएमजी स्रोत ="./assets/images/blue-mountains.jpg" ऑल्ट ="अवतार">
   <डिव क्लास ="पात्र">
   <h4 वर्ग ="शीर्षक"> नीला पहाड़ </h4>
   <पी> एनएसडब्ल्यू, ऑस्ट्रेलिया </पी>
   </div>
   </div>

2. खुला हुआ ui-card.component.css, और घटक में CSS सामग्री जोड़ें:

   कार्ड {
   डब्बे की छाया: 0 4पिक्सल 8पिक्सल 0 आरजीबीए(0, 0, 0, 0.2);
   चौड़ाई: 400पिक्सल;
   गद्दी: 8पिक्सल;
   अंतर: 24पिक्सल;
   पीछे का रंग: सफेद धुआं;
   फ़ॉन्ट परिवार: सान्स सेरिफ़;
   }
   कार्डआईएमजी {
   अधिकतम चौड़ाई: 400पिक्सल;
   }
   ।शीर्षक {
   पैडिंग शीर्ष: 16पिक्सल;
   }
   कंटेनर {
   गद्दी: 2पिक्सल 16पिक्सल;
   }

3. ui-card.component.ts फ़ाइल में पहले से ही नए घटक के लिए एक वर्ग है जहाँ आप नए कार्य, तर्क और कार्यक्षमता जोड़ सकते हैं। इसे ऐसा दिखना चाहिए:

   निर्यात करनाकक्षा यूआईकार्डघटक औजार ऑनइनिट {
   निर्माता() { }
    एनजीऑनइनिट (): शून्य {
   // यहां कुछ कोड लॉजिक जोड़ें
    }
   // या, अपने तर्क और कार्यक्षमता को नए कार्यों में जोड़ें
   }

किसी अन्य घटक के HTML में घटक का उपयोग कैसे करें

अंदर ui-card.component.ts, तीन विशेषताएं हैं: चयनकर्ता, टेम्पलेट यूआरएल, और स्टाइल यूआरएल। TemplateUrl घटक के HTML को संदर्भित करता है (और इसलिए HTML फ़ाइल से लिंक करता है)। StyleUrls विशेषता घटक के CSS और CSS फ़ाइल के लिंक को संदर्भित करती है।

@अवयव({
 चयनकर्ता: 'ऐप-यूआई-कार्ड',
 templateUrl: './ui-card.component.html',
 स्टाइल यूआरएल: ['./ui-card.component.css']
})

जब आप किसी अन्य घटक में UI कार्ड घटक का उपयोग करते हैं, तो आप "ऐप-यूआई-कार्ड" चयनकर्ता नाम का उपयोग करेंगे।

1. सबसे पहले, अपने वेबपेज में कुछ सामग्री जोड़ें। खुला हुआ src/app/app.component.html और एक नावबार जोड़ें:

   <डिव क्लास ="नावबार-शीर्षक">
   <एक वर्ग ="एनएवी-शीर्षक"><बी> वेब नवबार </बी></एक>
   </div>

2. अपने नावबार में कुछ स्टाइल जोड़ें src/app/app.component.css:

   .नवबार-शीर्षक {
   पीछे का रंग: #07393सी;
   गद्दी: 30पिक्सल 50पिक्सल;
   दिखाना: मोड़ना;
   संरेखित-आइटम: केंद्र;
   फ़ॉन्ट परिवार: सान्स सेरिफ़;
   }
   .नव-शीर्षक {
   text-decoration: कोई भी नहीं;
   रंग: सफेद;
   फ़ॉन्ट आकार: 16पीटीई;
   }
   

3. नेवबार के नीचे app.component.html, एक नया UI कार्ड जोड़ें। HTML टैग के रूप में "ऐप-यूआई-कार्ड" चयनकर्ता नाम का उपयोग करें:

   <ऐप-यूआई-कार्ड></app-ui-card>

4. आप कई बार टैग को शामिल करके घटक का पुन: उपयोग भी कर सकते हैं। ऐसा करने के लिए, इसके बजाय कई ऐप-यूआई-कार्ड HTML टैग का उपयोग करने के लिए उपरोक्त पंक्ति को बदलें:

   <डिव स्टाइल ="प्रदर्शन: फ्लेक्स">
   <ऐप-यूआई-कार्ड></app-ui-card>
   <ऐप-यूआई-कार्ड></app-ui-card>
   <ऐप-यूआई-कार्ड></app-ui-card>
   </div>

5. टर्मिनल से अपना कोणीय अनुप्रयोग चलाएँ एनजी सर्व कमांड करें, और अपनी वेबसाइट को वेब ब्राउज़र में खोलें।

घटक में इनपुट पैरामीटर कैसे पास करें

चूंकि घटक पुन: उपयोग योग्य है, ऐसे गुण हैं जिन्हें आप हर बार उपयोग करने पर बदलना चाह सकते हैं। इस मामले में, आप इनपुट पैरामीटर का उपयोग कर सकते हैं।

1. जोड़ें इनपुट के शीर्ष पर आयात की सूची में ui-card.component.ts:

   आयात {घटक, इनपुट, ऑनइनिट} से '@ कोणीय/core';

2. फिर अंदर दो इनपुट चर जोड़ें यूआईकार्डघटक कक्षा। ये आपको कार्ड पर प्रदर्शित होने वाले स्थान का नाम और छवि बदलने देंगे। आबाद करें एनजीऑनइनिट जैसा दिखाया गया है, छवि के लिए पथ बनाने या डिफ़ॉल्ट मान का उपयोग करने के लिए कार्य करें:

   निर्यात करनाकक्षा यूआईकार्डघटक औजार ऑनइनिट {
   @ इनपुट() स्थान का नाम: डोरी;
   @ इनपुट() छवि का नाम: डोरी;
   निर्माता() { }
    एनजीऑनइनिट (): शून्य {
   यदि (यहछवि का नाम) {
   यह.imageName = "./assets/images/" + यहछवि का नाम;
    } वरना {
   यह.imageName = "./assets/images/blue-mountains.jpg";
    }
    }
   }
   

3. में ui-card.component.html, इसके बजाय "स्थाननाम" इनपुट चर का उपयोग करने के लिए हार्ड कोडित शीर्षक 4 "ब्लू माउंटेन" मान बदलें। हार्ड कोड भी बदलें एसआरसी छवि टैग में विशेषता "imageName" इनपुट चर का उपयोग करने के लिए:

   <डिव क्लास ="कार्ड">
   <आईएमजी स्रोत ="{{छविनाम}}" ऑल्ट ="अवतार">
   <डिव क्लास ="पात्र">
   <h4 वर्ग ="शीर्षक">{{स्थान का नाम? स्थान का नाम: 'नीला पहाड़'}}</h4>
   <पी>एनएसडब्ल्यू, ऑस्ट्रेलिया</पी>
   </div>
   </div>

4. में app.component.html, "लोकेशननाम" और "इमेजनाम" इनपुट को शामिल करने के लिए "ऐप-यूआई-कार्ड" टैग को संशोधित करें। प्रत्येक UI कार्ड तत्व के लिए, एक भिन्न मान दर्ज करें। सुनिश्चित करें कि छवि फ़ाइलें आपके एंगुलर एप्लिकेशन के एसेट/इमेज फ़ोल्डर में मौजूद हैं।

   <डिव स्टाइल ="प्रदर्शन: फ्लेक्स">
   <ऐप-यूआई-कार्ड [स्थाननाम]="'नीला पहाड़'" [छविनाम]="'नीला-पर्वत.jpg'"></app-ui-card>
   <ऐप-यूआई-कार्ड [स्थाननाम]="'सिडनी'" [छविनाम]="'सिडनी.जेपीजी'"></app-ui-card>
   <ऐप-यूआई-कार्ड [स्थाननाम]="'न्यूकासल'" [छविनाम]="'न्यूकैसल.jpg'"></app-ui-card>
   </div>

5. टर्मिनल से अपना कोणीय अनुप्रयोग चलाएँ एनजी सर्व कमांड करें, और अपनी वेबसाइट को वेब ब्राउज़र में खोलें।

आप इन गुणों के बारे में इस बिंदु पर एक त्रुटि देख सकते हैं जिसमें कोई प्रारंभकर्ता नहीं है। अगर ऐसा है, तो बस जोड़ें या सेट करें "सख्त संपत्ति आरंभीकरण": गलत अपने में tsconfig.json.

एक नए घटक को कैसे रूट करें

यदि आपका घटक आपकी वेबसाइट के एक बड़े हिस्से का प्रतिनिधित्व कर रहा है जैसे कि एक नया पृष्ठ, तो आप उस घटक पर भी जा सकते हैं।

1. खुला हुआ ऐप-रूटिंग.मॉड्यूल.ts. फ़ाइल के शीर्ष पर UI कार्ड घटक आयात करें:

   आयात { यूआईकार्ड कॉम्पोनेंट } से './ui-card/ui-card.component';

2. मार्ग सरणी में रूटिंग पथ जोड़ें:

   स्थिरांक मार्ग: मार्ग = [
   //... कोई अन्य मार्ग जिसकी आपको आवश्यकता हो सकती है ...
    {पथ: 'uicard', घटक: UiCardComponent},
   ]

3. सभी मौजूदा सामग्री को इसमें बदलें app.component.html केवल नेवबार और राउटर-आउटलेट HTML टैग शामिल करने के लिए। राउटर-आउटलेट आपको पृष्ठों के बीच रूट करने की अनुमति देता है। नेवबार में हाइपरलिंक जोड़ें, जिसमें href विशेषता मार्ग सरणी में पथ से मेल खाती है:

   <डिव क्लास ="नावबार-शीर्षक">
   <एक वर्ग ="एनएवी-शीर्षक"><बी> वेब नवबार </बी></एक>
   <एक वर्ग ="एनएवी-ए-लिंक" href="/uicard"><बी> यूआई कार्ड </बी></एक>
   </div>
   <राउटर-आउटलेट></router-outlet>
   

4. नए UI कार्ड लिंक में कुछ स्टाइल जोड़ें, in app.component.css:

   .नव-ए-लिंक {
   text-decoration: कोई भी नहीं;
   रंग: #4b6569;
   फ़ॉन्ट आकार: 14पीटीई;
   मार्जिन छोड़ दिया: 60पिक्सल;
   फ़ॉन्ट वजन: लाइटर;
   }

5. टर्मिनल से अपना कोणीय अनुप्रयोग चलाएँ एनजी सर्व कमांड करें, और अपनी वेबसाइट को वेब ब्राउज़र में खोलें। लिंक वेबपेज पर नेविगेशन बार में दिखाई देगा।
6. अपने वेब ब्राउज़र में URL पते पर ध्यान दें। डिफ़ॉल्ट रूप से, यह आमतौर पर होता है http://localhost: 4200/. जब आप UI कार्ड लिंक पर क्लिक करते हैं, तो पेज पर रूट हो जाएगा http://localhost: 4200/यूइकार्ड, और UI कार्ड दिखाई देगा।

कोणीय में अवयव बनाना

एक घटक एंगुलर के प्रमुख निर्माण खंडों में से एक है। घटक आपको अपनी वेबसाइट के विभिन्न अनुभागों को छोटे, पुन: प्रयोज्य भागों में विभाजित करने की अनुमति देते हैं। आप छोटे बटन, कार्ड, बड़े साइडबार और नेविगेशन बार सहित घटकों में कुछ भी बना सकते हैं।

आप घटक के विभिन्न उदाहरणों में डेटा पास करने के लिए इनपुट चर का भी उपयोग कर सकते हैं। और आप URL पथों का उपयोग करके घटक को रूट कर सकते हैं।

यदि आप एक नया कोणीय ऐप विकसित कर रहे हैं, तो आपको अपने घटकों के माध्यम से नेविगेट करने के लिए अपने उपयोगकर्ताओं के लिए एक नेविगेशन बार बनाने की आवश्यकता हो सकती है। रिस्पॉन्सिव नेवी बार होने से आप इसे अलग-अलग डिवाइस पर, अलग-अलग स्क्रीन साइज में देख सकते हैं।