Obsolete answer. An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter. An Observable that contains a map of the query parameters available to all routes.
ParamMaplinkA map that provides access to the required and optional parameters specific to a route. The map supports retrieving a single value with get() or multiple values with getAll() .
queryParamMap - An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.
Reading Route ParametersThe ProductDetails component must read the parameter, then load the product based on the ID given in the parameter. The ActivatedRoute service provides a params Observable which we can subscribe to to get the route parameters (see Observables).
The following answer is no longer true, and the Angular team says:
There are no current plans to remove
params
orqueryParams
and there's no benefit to advising against their use.
According to the documentation :
Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version.
params — An Observable that contains the required and optional parameters specific to the route. Use paramMap instead.
Simple and efficient !
The following answer is no longer true, and the Angular team says:
There are no current plans to remove
params
orqueryParams
and there's no benefit to advising against their use.
Actually there is no difference but params
is pretty old and may be deprecated soon
paramMap
An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter.
queryParamMap
An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.
Note : The paramMap provide more convenience to play with route parameter. Having following three methods:
has() :
this.router.navigate(['example', id]);
this.activatedRoute.paramMap.subscribe(params => {
console.log(params.has('id')); // true
})
get() :
this.router.navigate(['example', "id","another ID"]);
this.activatedRoute.paramMap.subscribe(params => {
console.log(params.get('id'));
})
getAll() :
this.router.navigate(['example', { foo: ['bar', 'baz'] } ]);
this.activatedRoute.paramMap.subscribe(params => {
console.log(params.getAll('foo'));
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With