CODEWITHSUNDEEP
angulartypescriptangular2-routingangular5angular4-router
Can Karakoyun
Can Karakoyun

Reputation: 171

Angular 2 routerLink params & query params

Here is my route:

{ path: 'market/:currency', component: MainlayoutComponent, canActivate: [AuthGuard]}

I want redirect to with query params like this:

market/btc?sidebar=home

<a [routerLink]="['/market', currency]" [queryParams]="{sidebar: 'home'}"></a>

But when i click its redirect market/btc

What's the problem.

Editing

This code works i have another bug but i solved.

Upvotes: 5

Views: 13681

Answers (4)

Lia
Lia

Reputation: 11982

you can try:

<a [routerLink]="'/market/'+ currency" [queryParams]="{sidebar: 'home'}"></a>

or:

<a routerLink = "/market/{{currency}}" [queryParams]="{sidebar: 'home'}"></a>

Upvotes: 8

Sangwin Gawande
Sangwin Gawande

Reputation: 8176

There is no issue in your code. I tried following and its working nicely.

I have even added an extra parameter.

<a [routerLink]="['/market', currency]" [queryParams]="{sidebar:'home',tab:'5'}">Go to market</a>

TS :

const routes: Routes = [
    { path: "market/:currency", component: AppComponent}
];

I am getting following result :

http://localhost:49152/market/currency?sidebar=home&tab=5

Upvotes: 5

CruelEngine
CruelEngine

Reputation: 2851

you just need to preserve your queryParams :

queryParamsHandling="preserve"

Add the above attribute/directive to your route : 

<a [routerLink]="['/market', currency]" [queryParams]="{sidebar: 'home'}" queryParamsHandling="preserve"></a>

Upvotes: 11

Prachi
Prachi

Reputation: 3574

Try using:

<a [routerLink]="['/market', currency]" [queryParams]="{sidebar: home}"></a>

Upvotes: 1

Related Questions