Angular में पैरेंट कंपोनेंट में डेटा ट्रांसफर
चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट में डेटा ट्रांसफर किया जा सकता है। यह
विशेष ऑब्जेक्ट EventEmitter और मेथड emit की सहायता से
इवेंट्स एमिट करके किया जाता है। चाइल्ड कंपोनेंट इवेंट्स एमिट करेगा,
इवेंट के साथ कुछ डेटा पास करेगा, और पैरेंट कंपोनेंट इवेंट्स को कैच
करेगा, पैरेंट कंपोनेंट से डेटा प्राप्त करेगा।
आइए प्रैक्टिस में ट्राई करते हैं। इसके लिए हमें कुछ स्टेप्स फॉलो करने
होंगे। शुरुआत में हमारे चाइल्ड कंपोनेंट में डेकोरेटर @Output
और क्लास EventEmitter इम्पोर्ट करेंगे:
import { Component, Output, EventEmitter } from '@angular/core';
अब चाइल्ड क्लास में प्रॉपर्टी onData बनाएंगे, जिसकी वैल्यू
नया ऑब्जेक्ट EventEmitter होगी, जिसमें स्ट्रिंग होगी:
export class UserComponent {
@Output()
public onData = new EventEmitter<string>();
}
अब मेथड send बनाएंगे, जिसका कॉल इवेंट onData को
दिए गए टेक्स्ट के साथ पैरेंट कंपोनेंट में एमिट करेगा:
export class UserComponent {
@Output()
public onData = new EventEmitter<string>();
send() {
this.onData.emit('xxx');
}
}
चाइल्ड कंपोनेंट के टेम्पलेट में बटन बनाएंगे, जिसके क्लिक पर
मेथड send कॉल होगा:
<button (click)="send()">
send data
</button>
पैरेंट कंपोनेंट में मेथड onData बनाएंगे, जो ऑटोमैटिकली
कॉल होगा जब चाइल्ड कंपोनेंट से संबंधित इवेंट एमिट होगा। मेथड के
पैरामीटर में ट्रांसफर किया गया डेटा प्राप्त होगा:
export class AppComponent {
public onData(data: string) {
console.log(data);
}
}
पैरेंट कंपोनेंट के टेम्पलेट में चाइल्ड कंपोनेंट के टैग से इवेंट बाइंड करेंगे:
<app-user (onData)="onData($event)"></app-user>
चाइल्ड कंपोनेंट में तीन बटन बनाएं, जो अलग-अलग इवेंट्स एमिट करते हैं। एमिट किए गए इवेंट्स को पैरेंट कंपोनेंट में कैच करें।
