Menu
I'm trying to understand the way of creating a route, with some information in it's URL parameters.
This is my route (app.routes.ts):
{path: 'results/:id', component: MyResultsComponent},
This is how I navigate to the route :
goToResultsPage(query: string) {
this.router.navigate(['results', query], { queryParams: { pageSize: 20 } });}
As you can see, I've also a query parameter. I was wondering, what is the best and cleanest way to retrieve this in my MyResultsComponent. Right now I've kind of a nested subscribe structure:
ngOnInit() {
this.route
.params
.subscribe(params => {
this.query = params['id'];
this.route
.queryParams
.subscribe(queryParams => {
this.offset = queryParams['pageSize'];
#find entries this.entryService.findEntries(this.query, this.pageSize);
});
});
}
Afterwards, I want to pass this parameters to my EntryService, which returns the found entries.
475
Query parameters allow you to pass optional parameters to a route such as pagination information. The key difference between query parameters and route parameters is that route parameters are essential to determining route, whereas query parameters are optional.
Angular website says 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.
In this tutorial, let us look at how to pass and access the Optional or query parameters in Angular. Query parameters allow you to pass optional parameters like page number to the component. In this tutorial, we look at how to pass the query parameters using the queryParams directive.
Using Query parameters in Angular, we can pass optional parameters to angular routes in our applications. There are two ways we can pass query parameters in angular. Using RouterLink. We will go through few examples to understand further. Pass query parameters to Router.navigate using queryParams. Passing multiple query parameters.
If you are navigating to a route using Router.navigate, we can pass query parameters to navigate method using queryParams property. For example to navigatre to list of books orderby price, we can pass orderby parameter using queryParams as shown below.
Now, you have an understanding of how queryParamsHandling can be used to preserve and merge query parameters. In our example, if instead, you are using the RouterLink directive to navigate to the route, you would use queryParams like this:
queryParams property accepts object as a value. To pass multiple query parameters to router.navigate we can construct an object with list of parametrs and pass it on to queryParams. For example to display books under category fiction and orderby price, use the below code snippet.
The Observable.combineLatest is a solution in this situation, isn't it?
Observable
.combineLatest(
this.route.params,
this.route.queryParams,
(params: any, queryParams: any) => {
return {
id: +params.id,
pageSize: queryParams.pageSize ? +queryParams.pageSize: null
}
})
.subscribe(bothParams => {
this.id = bothParams.id;
this.pageSize = bothParams.pageSize;
});
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
