Angular Academy · पाठ

रूट पैरामीटर और क्वेरी पैरामीटर

रूट पैरामीटर पढ़ें और उनके अनुसार प्रतिक्रिया दें

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

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

रूट पैरामीटर बनाम क्वेरी पैरामीटर

रूट पैरामीटर पथ का हिस्सा होते हैं (/user/42)। क्वेरी पैरामीटर ? के बाद जोड़े जाते हैं (/search?q=ng&page=2)। राउटर आपको दोनों तक प्रतिक्रियाशील पहुँच देता है।

रूट पैरामीटर परिभाषित करना

पैरामीटर घोषित करने के लिए पथ में कोलन का उपयोग करें।

export const routes = [
  { path: 'user/:id', component: UserComponent }
];

paramMap की सहायता से पैरामीटर पढ़ना

ActivatedRoute.paramMap एक ऑब्ज़र्वेबल है, जो रूट पैरामीटर बदलने पर उत्सर्जन करता है। मान पढ़ने के लिए .get() का उपयोग करें।

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

पैरामीटर को ऑब्ज़र्व क्यों करें

/user/1 से /user/2 पर जाने पर वही कंपोनेंट फिर से उपयोग किया जा सकता है। कंस्ट्रक्टर केवल एक बार चलता है, लेकिन paramMap फिर उत्सर्जन करता है — इसलिए बदलाव पर प्रतिक्रिया देने के लिए सब्सक्राइब करें।

एक बार पढ़ने के लिए स्नैपशॉट

यदि कंपोनेंट को कभी किसी अलग पैरामीटर के लिए फिर से उपयोग नहीं किया जाता, तो आप स्नैपशॉट को सिंक्रोनस रूप से पढ़ सकते हैं।

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

queryParamMap के साथ क्वेरी पैरामीटर

queryParamMap क्वेरी स्ट्रिंग के मान उपलब्ध कराता है और यह भी एक ऑब्ज़र्वेबल है।

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

क्वेरी पैरामीटर के साथ नेविगेट करना

router.navigate में queryParams विकल्प या routerLink डायरेक्टिव का उपयोग करें।

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

क्वेरी पैरामीटर सुरक्षित रखना

queryParamsHandling: 'merge' कुछ पैरामीटर अपडेट करते समय मौजूदा पैरामीटर बनाए रखता है; 'preserve' उन्हें नेविगेशन के दौरान साथ ले जाता है।

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

कंपोनेंट इनपुट बाइंडिंग (आधुनिक)

withComponentInputBinding() के साथ रूट और क्वेरी पैरामीटर सीधे कंपोनेंट के @Input() (या इनपुट सिग्नल) से बाइंड किए जा सकते हैं, जिससे ActivatedRoute की आवश्यकता नहीं रहती।

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

दोहराए गए पैरामीटर के लिए getAll

जब कोई क्वेरी कुंजी कई बार आ सकती हो, तब getAll() का उपयोग करें, जैसे ?tag=a&tag=b।

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

डेटा लोड करने के साथ पैरामीटर संयोजित करना

एक सामान्य तरीका है: पैरामीटर को switchMap की सहायता से HTTP कॉल में मैप करें, ताकि आईडी बदलने पर डेटा फिर से प्राप्त हो।

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

त्वरित जाँच

रूट पैरामीटर की अपनी समझ जाँचिए।

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

पुनरावलोकन: रूट और क्वेरी पैरामीटर

राउटर पैरामीटर तक प्रतिक्रियाशील पहुँच उपलब्ध कराता है।

paramMap: पथ पैरामीटर, पुनः उपयोग होने पर इनका निरीक्षण करें।
queryParamMap: क्वेरी स्ट्रिंग, दोहराए गए मानों के लिए getAll के साथ।
एक बार पढ़ने के लिए snapshot।
withComponentInputBinding() पैरामीटर को इनपुट से बाइंड करता है।

अगला विषय: रिज़ॉल्वर और रूट डेटा।

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

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

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

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

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

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

क्या “रूट पैरामीटर और क्वेरी पैरामीटर” पाठ निःशुल्क है?

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

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

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

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

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

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

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

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

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

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

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