Angular Route Parameters dynamic routing का core concept हैं। इनका use तब किया जाता है जब URL में dynamic values pass करनी हों, जैसे user id, product id, category name या slug। Route Parameters Angular Router को flexible और data-driven navigation बनाने में मदद करते हैं।
इस chapter में हम Route Parameters को basic से लेकर advanced usage तक detail में समझेंगे, with clear examples और real-world scenarios।
Route Parameters क्या होते हैं
Route Parameters URL के dynamic segments होते हैं, जिन्हें route configuration में define किया जाता है और component में read किया जाता है।
Example URL:
/users/10/product/iphone-15
यहाँ 10 और iphone-15 route parameters हैं।
Route Parameters को Define करना
Route configuration में parameter : से define होता है।
{
path: 'users/:id',
component: UserDetailComponent
}
यह route /users/anything को match करेगा।
Single Route Parameter Example
{ path: 'product/:productId', component: ProductComponent }
URL:
/product/101/product/laptop
Angular Router automatically value extract करता है।
Component में Route Parameter Read करना
Route parameters read करने के लिए ActivatedRoute use होता है।
constructor(private route: ActivatedRoute) {}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
}
snapshot current route state का static representation देता है।
Snapshot vs Observable Approach
Snapshot Approach
this.route.snapshot.paramMap.get('id');
- Simple
- Initial load के लिए best
Observable Approach
this.route.paramMap.subscribe(params => {
const id = params.get('id');
});
- Route reuse पर update होता है
- Dynamic navigation के लिए better
When Observable Approach जरूरी है
Agar same component different parameter के साथ reuse हो रहा है:
/users/1/users/2
Snapshot value update नहीं करेगा, लेकिन observable करेगा।
Multiple Route Parameters
{
path: 'category/:categoryId/product/:productId',
component: ProductDetailComponent
}
URL:
/category/5/product/22
Component में:
this.route.snapshot.paramMap.get('categoryId');
this.route.snapshot.paramMap.get('productId');
Optional Route Parameters
Angular Router officially optional parameters support नहीं करता, लेकिन workaround possible है।
{ path: 'profile/:id', component: ProfileComponent }
{ path: 'profile', component: ProfileComponent }
Two routes define करके optional behavior achieve किया जाता है।
Route Parameters vs Query Parameters
Route Parameters:
- URL path का हिस्सा
- Required navigation structure
Query Parameters:
- URL के end में
?के बाद - Optional filters, sorting के लिए
Example:
/products/10/products?category=mobile
Query Parameters Read करना
this.route.queryParamMap.subscribe(params => {
const category = params.get('category');
});
Query parameters routing structure को affect नहीं करते।
Programmatic Navigation with Parameters
this.router.navigate(['/users', 10]);
Resulting URL:
/users/10
Multiple parameters:
this.router.navigate(['/category', 5, 'product', 22]);
Navigation with Query Parameters
this.router.navigate(['/products'], {
queryParams: { category: 'mobile', sort: 'price' }
});
Generated URL:
/products?category=mobile&sort=price
Preserving Query Parameters
this.router.navigate(['/products'], {
queryParamsHandling: 'preserve'
});
यह existing query params को maintain करता है।
Route Parameter Validation Concept
Route parameters type-safe नहीं होते।
- Angular string values provide करता है
- Validation component या guard में करनी होती है
Example:
const id = Number(this.route.snapshot.paramMap.get('id'));
Invalid values handle करना जरूरी है।
Route Reuse और Parameter Changes
Angular by default same route reuse करता है।
- Component destroy नहीं होता
- Only params change होते हैं
Observable-based parameter handling इसलिए recommended है।
Route Parameters और Guards
Guards parameters access कर सकते हैं।
canActivate(route: ActivatedRouteSnapshot) {
const id = route.paramMap.get('id');
}
यह authorization और validation scenarios में useful है।
Route Parameters और SEO
SEO-friendly URLs के लिए route parameters useful हैं।
Example:
/blog/angular-routing-guide
Readable और indexable URLs create होते हैं।
Common Mistakes with Route Parameters
- Snapshot पर over-depend करना
- Parameter name mismatch
- Type conversion ignore करना
- Optional parameter assume करना
Clear parameter handling routing bugs avoid करता है।
Real-World Use Cases
Route Parameters widely use होते हैं:
- User profile pages
- Product detail pages
- Blog posts
- Admin edit screens
Angular Route Parameters routing को static से dynamic बनाते हैं। अगले chapter में हम Lazy Loading Modules सीखेंगे, जहाँ routing performance और scalability का major role होगा।