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.

4 answers

  • answered 2018-05-16 06:25 Prachi

    Try using:

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

  • answered 2018-05-16 06:28 CruelEngine

    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>
    

  • answered 2018-05-16 06:38 Sangwin Gawande

    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

  • answered 2018-05-16 06:50 fateme fazli

    you can try:

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

    or:

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