Angular routed components में डेटा ट्रांसफर: 5 सर्वश्रेष्ठ तरीके

Angular routed components में डेटा कैसे ट्रांसफर करें: TypeScript पर पूर्ण गाइड

हर डेवलपर जो Angular के साथ काम करना शुरू करता है, देर-सबेर इस सवाल का सामना करता है: "एक कम्पोनेंट से दूसरे कम्पोनेंट में राउटर के माध्यम से डेटा कैसे ट्रांसफर करें?"। Stack Overflow पर इस सवाल ने हजारों व्यूज जुटाए हैं - और यह कोई संयोग नहीं है। सामान्य parent-child कम्पोनेंट्स के विपरीत, जहां @Input() और @Output() का उपयोग पर्याप्त है, Angular में राउटिंग अपनी जटिलताएँ जोड़ता है।

इस लेख में हम Angular routed components में डेटा ट्रांसफर करने के 5 सिद्ध तरीकों पर चर्चा करेंगे। आप जानेंगे कि कब कौन सा तरीका उपयोग करना है, और TypeScript में तैयार उदाहरण प्राप्त करेंगे। चलिए शुरू करते हैं!

@Input के माध्यम से सीधे डेटा क्यों नहीं ट्रांसफर कर सकते?

कई नौसिखिए ऐसा करने की कोशिश करते हैं:

// ❌ यह काम नहीं करता\n<router-outlet [someData]="data"></router-outlet>

Angular Router कम्पोनेंट्स को डायनामिक रूप से बनाता है। router-outlet एक डायरेक्टिव है, टेम्पलेट एलिमेंट नहीं। इसलिए एट्रीब्यूट के माध्यम से सीधे डेटा ट्रांसफर संभव नहीं है। लेकिन इसके वर्कअराउंड हैं - और वे और भी सुविधाजनक हैं!

तरीका 1: Router State का उपयोग (सबसे सरल)

सबसे सहज तरीका है नेविगेशन के दौरान state ऑब्जेक्ट के माध्यम से डेटा ट्रांसफर करना। यह तरीका Angular 7+ में आया और "आउट ऑफ द बॉक्स" काम करता है।

यह कैसे काम करता है

आप router.navigate() कॉल करते समय या routerLink के माध्यम से डेटा वाला एक ऑब्जेक्ट ट्रांसफर करते हैं।

// Component A — भेजने वाला\nimport { Component } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Component({\n  selector: 'app-user-list',\n  template: `\n    <button (click)="goToDetails()">उपयोगकर्ता खोलें</button>\n  `\n})\nexport class UserListComponent {\n  constructor(private router: Router) {}\n\n  goToDetails() {\n    this.router.navigate(['/user', 42], {\n      state: { name: 'इवान पेट्रोव', role: 'admin' }\n    });\n  }\n}

// Component B — प्राप्त करने वाला\nimport { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Component({\n  selector: 'app-user-details',\n  template: `\n    <div *ngIf="userData">\n      <h2>{{ userData.name }}</h2>\n      <p>भूमिका: {{ userData.role }}</p>\n    </div>\n  `\n})\nexport class UserDetailsComponent implements OnInit {\n  userData: any;\n\n  constructor(private router: Router) {\n    // नेविगेशन हिस्ट्री से डेटा प्राप्त करें\n    this.userData = this.router.getCurrentNavigation()?.extras?.state;\n  }\n\n  ngOnInit() {\n    // वैकल्पिक तरीका — history.state के माध्यम से\n    if (!this.userData) {\n      this.userData = history.state;\n    }\n  }\n}

फायदे और नुकसान

\n
• ✅ कार्यान्वयन में सरलता
\n
• ✅ डेटा URL में दिखाई नहीं देता
\n
• ✅ किसी भी प्रकार के डेटा (ऑब्जेक्ट, ऐरे) के साथ काम करता है
\n
• ❌ पेज रिफ्रेश करने पर डेटा खो जाता है
\n
• ❌ सीधे URL पर जाने पर काम नहीं करता
\n

कब उपयोग करें: अस्थायी डेटा ट्रांसफर करने के लिए जो रीलोड पर महत्वपूर्ण नहीं है (जैसे, फ्लैश-मैसेज, फिल्टर)।

तरीका 2: Route Resolver (डेटा प्रीलोड करने के लिए)

यदि आपको कम्पोनेंट प्रदर्शित होने से पहले डेटा लोड करना है, तो Angular Resolver का उपयोग करें। यह एक सर्विस है जो रूट एक्टिवेट होने से पहले डेटा को रिज़ॉल्व करती है।

Resolver बनाएँ

// user.resolver.ts\nimport { Injectable } from '@angular/core';\nimport { Resolve, ActivatedRouteSnapshot } from '@angular/router';\nimport { Observable, of } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class UserResolver implements Resolve<any> {\n  resolve(route: ActivatedRouteSnapshot): Observable<any> {\n    const userId = route.paramMap.get('id');\n    // इम