Please enable JavaScript.
Coggle requires JavaScript to display documents.
Query Parameters vs Route Parameters - Coggle Diagram
Query Parameters vs Route Parameters
Query Parameters
Optional
/products?id=1
Query parameters are not part of the route.Hence you do not define them in the routes array like route parameters. There are three ways in which you can pass a Query Parameter to Route
Using routerlink directive
<a [routerLink]="['product']" [queryParams]="{ page:2 }">Page 2</a>
<a [routerLink]="['product']" [queryParams]="{ page:2 ,sort:5}">Page 2</a>
Using router.navigate method.
this.router.navigate(['/products'], { queryParams: { page: 2, sort:'name'} });
Using the router.navigateByUrl method
this.router.navigateByUrl('product?pageNum=2');
Reading Query Parameters
Subscribing to the queryParamMap or queryParams observable
The
queryParamMap
is a Observable that returns a
ParamMap
of the query parameters available to the current route
The
queryParamsMap
is accessible via ActivatedRoute and The ParamMap object contains three methods
get
this.Activatedroute.queryParamMap.subscribe(params => {this.pageNum = +params.get('pageNum')||0;});
getAll
has
The
queryParams
is a Observable that returns a Params. The Params array is a list of parameter values, indexed by name.
this.Activatedroute.queryParams.subscribe(params => {this.pageNum = +params.['pageNum']||0;});
Using queryParamMap or queryParams property of the snapshot property
this.Activatedroute.snapshot.queryParamMap.get('pageNum')||0;
this.Activatedroute.snapshot.queryParams['pageNum']||0;
queryParamsHandling
The query parameter is lost when the user navigates to another route.
can change this behavior by configuring the
queryParamsHandling
strategy
It has three options
""
this is default
preserve
Angular preserves or carries forwards the query parameter of the current route to the next navigation.
Any query parameters of the next route are discarded
this.router.navigate(['product'], { queryParams: { pageNum: this.pageNo + 1 }, queryParamsHandling :"preserve"});
1 more item...
If you change the route from one url to another say from /firstUrl?name=bat7 to /secondUrl that time you need to say so that the queryParam "name" will be lost
this.router.navigate(['/secondUrl'], { queryParamsHandling: 'preserve' });
1 more item...
merge
The Angular merges the query parameters from the current route with that of the next route before navigating to the next route.
this.router.navigate(['product'], { queryParams: { pageNum: this.pageNo + 1 }, queryParamsHandling :"merge"});
1 more item...
this.router.navigate(['/secondUrl/newVal'], { queryParams: { age: 'not-known'}, queryParamsHandling: 'merge' });
1 more item...
Route Parameters
if don't provide, it won't navigate
/product/:id