Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RouterLink with multiple params in Angular

I want to create a link to the route with multiple parameters and bind them in tempalte. Until now, I've been doing this by executing the function on (click) event, but I was wondering if it's possible within RouterLink's binding.

Here is the function I use to bind parameters:

redirect() {
    this._router.navigate( ['/category', { cat: this.category, page: this.page }]);
}

My route looks like:

{
    path: 'category/:cat/:page',
    component: PostComponent
}

Will I be able to do the same inside routerLink directive?

like image 362
Dawid Zbiński Avatar asked Sep 22 '16 18:09

Dawid Zbiński


People also ask

How pass multiple parameters in URL react router?

To add multiple parameters with React Router, we can get the URL parameters from the useParams hook. <Route path="/:category/:id" exact component={ItemDetails} />; to add the category and id parameters to the Route . We call useParams to return an object with the id and category parameters.

What is difference between routerLink and href?

Href is the basic attribute provided by Html to navigate through pages which reloads the page on click. routerLink is the attribute provided by angular to navigate to different components without reloading the page.

Can we pass object in routerLink?

RouterLink for dynamic dataDynamic data or user-defined objects can be passed from Angular version 7.2 using the state object stored in History API. The state value can be provided using the routerLink directive or navigateByURL.

Can I use routerLink on Div?

Yes it can be attached to div tag, your route is probably wrong try add / in front of route.


1 Answers

Yes, of-course, you could use routerLink to form href tag dynamically for navigation. Values in array where each value will get evaluated against Component context.

[routerLink]="['/category', category, page ]"
like image 196
Pankaj Parkar Avatar answered Sep 21 '22 11:09

Pankaj Parkar