एंगुलर में आउटपुट डेकोरेटर का उपयोग कैसे करें

आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। अधिक पढ़ें।

एंगुलर में, एक वेब पेज में कई अलग-अलग पुन: प्रयोज्य घटक हो सकते हैं। प्रत्येक घटक में आमतौर पर अपना टाइपस्क्रिप्ट तर्क, HTML टेम्पलेट और CSS स्टाइल होता है।

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

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

चाइल्ड कंपोनेंट में आउटपुट डेकोरेटर कैसे जोड़ें

सबसे पहले, आपको पैरेंट कंपोनेंट और चाइल्ड कंपोनेंट के साथ एक नया Angular ऐप बनाना होगा।

एक बार आपके पास माता-पिता और बच्चे के घटक होने के बाद, आप आउटपुट डेकोरेटर का उपयोग डेटा ट्रांसफर करने और दो घटकों के बीच की घटनाओं को सुनने के लिए कर सकते हैं।

कोई नया बनाएं कोणीय अनुप्रयोग . डिफ़ॉल्ट रूप से, 'ऐप' रूट घटक का नाम है। इस घटक में तीन मुख्य फ़ाइलें शामिल हैं: 'app.component.html', 'app.component.css', और 'app.component.ts'।
इस उदाहरण के लिए, 'ऐप' घटक मूल घटक के रूप में कार्य करेगा। सभी सामग्री को 'app.component.html' में निम्न के साथ बदलें:
```
 <div class="parent-component"> 
  <h1> This is the parent component </h1> 
</div>
```

'App.component.css' में मूल ऐप घटक में कुछ स्टाइल जोड़ें:

 .parent-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightcoral; 
  padding: 20px 
}

'एनजी जनरेट कंपोनेंट' कमांड का उपयोग करें एक नया कोणीय घटक बनाएँ 'डेटा-घटक' कहा जाता है। इस उदाहरण में, 'डेटा-घटक' बाल घटक का प्रतिनिधित्व करेगा।
```
 ng g c data-component
```
'data-component.component.html' में चाइल्ड कंपोनेंट में सामग्री जोड़ें। नया बटन जोड़ने के लिए वर्तमान सामग्री को बदलें। बटन को उस फ़ंक्शन से बाइंड करें जो तब चलेगा जब उपयोगकर्ता उस पर क्लिक करेगा:
```
 <div class="child-component"> 
  <p> This is the child component </p> 
  <button (click)="onButtonClick()">Click me</button> 
</div>
```

'Data-component.component.css' में चाइल्ड कंपोनेंट में कुछ स्टाइल जोड़ें:

 .child-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightblue; 
  margin: 20px; 
  padding: 20px 
}

'data-component.component.ts' में घटक के लिए टाइपस्क्रिप्ट फ़ाइल में ऑनबटनक्लिक () फ़ंक्शन जोड़ें:
```
 onButtonClick() { 
}
```
अभी भी टाइपस्क्रिप्ट फ़ाइल के अंदर, आयात सूची में 'आउटपुट' और 'इवेंटएमिटर' जोड़ें:
```
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
```
DataComponentComponent वर्ग के अंदर, 'buttonWasClicked' नामक घटक के लिए एक आउटपुट चर घोषित करें। यह एक इवेंट एमिटर होगा। एक EventEmitter एक बिल्ट-इन क्लास है जो आपको एक घटना होने पर दूसरे घटक को सूचित करने की अनुमति देता है।
```
 export class DataComponentComponent implements OnInit { 
  @Output() buttonWasClicked = new EventEmitter<void>(); 
  // ... 
}
```
onButtonClick() फ़ंक्शन के अंदर 'buttonWasClicked' ईवेंट एमिटर का उपयोग करें। जब उपयोगकर्ता बटन पर क्लिक करता है, तो डेटा-घटक इस घटना को पैरेंट ऐप घटक को भेज देगा।
```
 onButtonClick() { 
    this.buttonWasClicked.emit(); 
}
```

चाइल्ड कंपोनेंट में इवेंट्स को पैरेंट कंपोनेंट से कैसे सुनें

चाइल्ड कंपोनेंट की Output प्रॉपर्टी का उपयोग करने के लिए, आपको पैरेंट कंपोनेंट से एमिटेड इवेंट को सुनना होगा।

'App.component.html' के अंदर चाइल्ड कंपोनेंट का उपयोग करें। HTML टैग बनाते समय आप 'buttonWasClicked' आउटपुट को गुण के रूप में जोड़ सकते हैं। ईवेंट को किसी नए फ़ंक्शन से बाइंड करें।
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
```
'App.component.ts' के अंदर, चाइल्ड कंपोनेंट में होने पर बटन क्लिक इवेंट को हैंडल करने के लिए नया फ़ंक्शन जोड़ें। उपयोगकर्ता द्वारा बटन पर क्लिक करने पर एक संदेश बनाएं।
```
 message: string = "" 
 
buttonInChildComponentWasClicked() { 
    this.message = 'The button in the child component was clicked'; 
}
```
संदेश को 'app.component.html' में प्रदर्शित करें:
```
 <p>{{message}}</p>
```
अपने एंगुलर एप्लिकेशन को चलाने के लिए टर्मिनल में 'एनजी सर्व' कमांड टाइप करें। इसे वेब ब्राउज़र में लोकलहोस्ट: 4200 पर खोलें। माता-पिता और बच्चे के घटक अलग-अलग पृष्ठभूमि रंगों का उपयोग करते हैं ताकि उनके बीच अंतर करना आसान हो सके।
पर क्लिक करें मुझे क्लिक करें बटन। बाल घटक घटना को मूल घटक को भेजेगा, जो संदेश प्रदर्शित करेगा।

चाइल्ड कंपोनेंट से पेरेंट कंपोनेंट को डेटा कैसे भेजें

आप चाइल्ड कंपोनेंट से पेरेंट कंपोनेंट को भी डेटा भेज सकते हैं।

'Data-component.component.ts' में, कुछ डेटा वाले स्ट्रिंग्स की सूची को संग्रहीत करने के लिए एक चर जोड़ें।
```
 listOfPeople: string[] = ['Joey', 'John', 'James'];
```
ButtonWasClicked ईवेंट एमिटर के रिटर्न प्रकार को संशोधित करें। पिछले चरण में आपके द्वारा घोषित स्ट्रिंग्स की सूची से मिलान करने के लिए इसे शून्य से स्ट्रिंग [] में बदलें:
```
 @Output() buttonWasClicked = new EventEmitter<string[]>();
```
ऑनबटनक्लिक () फ़ंक्शन को संशोधित करें। घटना को मूल घटक में भेजते समय, डेटा को एमिट () फ़ंक्शन में एक तर्क के रूप में जोड़ें:
```
 onButtonClick() { 
    this.buttonWasClicked.emit(this.listOfPeople); 
}
```
'App.component.html' में, 'app-data-component' टैग को संशोधित करें। ButtonInChildComponentWasClicked() फ़ंक्शन में '$event' जोड़ें। इसमें बाल घटक से भेजा गया डेटा शामिल है।
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
```
डेटा के लिए पैरामीटर जोड़ने के लिए 'app.component.ts' में फ़ंक्शन को अपडेट करें:
```
 buttonInChildComponentWasClicked(dataFromChild: string[]) { 
    this.message = 'The button in the child component was clicked'; 
}
```

बाल घटक से आने वाले डेटा को स्टोर करने के लिए 'डेटा' नामक एक नया चर जोड़ें:

 message: string = "" 
data: string[] = [] 
 
buttonInChildComponentWasClicked(dataFromChild: string[]) { 
    this.message = 'The button in the child component was clicked'; 
    this.data = dataFromChild; 
}

एचटीएमएल पेज पर डेटा प्रदर्शित करें:
```
 <p>{{data.join(', ')}}</p>
```
अपने एंगुलर एप्लिकेशन को चलाने के लिए टर्मिनल में 'एनजी सर्व' कमांड टाइप करें। इसे वेब ब्राउज़र में लोकलहोस्ट: 4200 पर खोलें।
पर क्लिक करें मुझे क्लिक करें बटन। चाइल्ड कंपोनेंट चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट को डेटा भेजेगा।

आउटपुट डेकोरेटर का उपयोग करके अन्य घटकों को डेटा भेजना

ऐसे अन्य डेकोरेटर हैं जिनका आप एंगुलर में उपयोग कर सकते हैं, जैसे कि इनपुट डेकोरेटर या कंपोनेंट डेकोरेटर। आप अपने कोड को सरल बनाने के लिए एंगुलर में अन्य सज्जाकारों का उपयोग कैसे कर सकते हैं, इसके बारे में अधिक जान सकते हैं।