Routing
Route Parameters
Dynamic URLs, Query Params
💡 Route parameters ek "fill in the blank" URL jaisा hai — /users/:id ek TEMPLATE hai (jaise "Dear ___"), actual URL (/users/42) mein blank fill ho jaata hai — component ko pata chal jaata hai EXACTLY kaunsa user chahiye.
Route parameters (:paramName syntax) DYNAMIC URLs banate hain — /users/:id se /users/1, /users/2 sab match hote hain. ActivatedRoute service se component ke andar current parameter values access karte hain. Query parameters (?key=value) ADDITIONAL, optional data ke liye.
// Route definition:
// { path: 'users/:id', component: UserDetailComponent }
import { ActivatedRoute } from '@angular/router';
export class UserDetailComponent implements OnInit {
userId: string = '';
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.userId = this.route.snapshot.paramMap.get('id') || '';
// URL "/users/42" se, userId = "42"
}
}
// Navigation with query params:
// <a [routerLink]="['/search']" [queryParams]="{ q: 'angular' }">Search</a>
// Result URL: /search?q=angular🔢
Route parameters ek "fill in the blank" URL jaisा hai — /users/:id ek TEMPLATE hai (jaise "Dear ___"), actual URL (/users/42) mein blank fill ho jaata hai — component ko pata chal jaata hai EXACTLY kaunsa user chahiye.
1 / 2
⚡ Quick Recap
- :paramName = dynamic URL segments (jaise /users/:id)
- ActivatedRoute.snapshot.paramMap = current parameter values
- Query params (?key=value) = additional, optional data
Is page mein (2 subtopics)
Ek route mein MULTIPLE dynamic segments ho sakte hain — jaise /category/:categoryId/product/:productId — dono parameters ActivatedRoute se access hote hain.
// Route: { path: 'category/:categoryId/product/:productId', component: ProductComponent }
export class ProductComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const categoryId = this.route.snapshot.paramMap.get('categoryId');
const productId = this.route.snapshot.paramMap.get('productId');
console.log(categoryId, productId);
}
}
// URL: /category/electronics/product/42Tip: Bahut zyada nested parameters (3+) usually sign hai ki route structure ko simplify karna chahiye — query parameters (?filter=...) kabhi-kabhi cleaner alternative hote hain optional/filter-jaisi data ke liye.
Jab SAME component reuse hoti hai (jaise ek "next product" button jo SAME route par rehta hai, sirf ID badalta hai), snapshot STALE ho jaata hai — paramMap Observable subscribe karna zaroori hai LIVE updates ke liye.
import { ActivatedRoute } from '@angular/router';
export class ProductComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
const id = params.get('id');
this.loadProduct(id); // har baar ID change hone par chalता hai
});
}
loadProduct(id: string | null) { /* ... */ }
}Common Mistake: snapshot.paramMap sirf EK BAAR value deता hai (component create hone par) — agar user SAME component ke andar "next" click karके navigate kare (URL change, component reuse), snapshot UPDATE NAHI hoga. paramMap.subscribe() is problem ko solve karta hai.