Angular 2/4 - Passing multiple parameters in routerLink

Question

I'm trying to route a link to a page in my Angular application, but always receive the same error.

My Route.ts file has these routes:

export const ROUTES : Routes = [

    {path:'',component:AvisosComponent    },
    {path:'gerenciarModeloAviso', component:GerenciaModAvisoComponent },
    {path:'editModeloAviso/:id/:action', component: EditModeloAvisoComponent  }   

]

The problem is in the last route, that has two parameters.

And in the html I tried this:

<img src="../assets/editarOn.png" alt="Editar" [routerLink]="['/editModeloAviso',estrut.idAvisoEstrutura,'VIEW']" />

Then, I tried this:

<img src="../assets/editarOn.png" alt="Editar" [routerLink]="['/editModeloAviso',{id:estrut.idAvisoEstrutura,action:'VIEW'}]" />

And the error are always the same:

Error route

Just for comment, I changed the route file to this:

export const ROUTES : Routes = [

    {path:'',component:AvisosComponent    },
    {path:'gerenciarModeloAviso', component:GerenciaModAvisoComponent },
    {path:'editModeloAviso/:id/action', component: EditModeloAvisoComponent  }   

]

( I removed the ":" before the "action" word. Anyway, the error persists. )

If I use just one parameter in the route, It's ok, i have no error. But with two, no way.

Could You help me ?

Thanks in advance.

Can't reproduce: stackblitz.com/edit/…. Post a complete minimal example reproducing the problem, as I just did. — JB Nizet
– JB Nizet, Commented Mar 13, 2018 at 20:08
What part of the app you u need in this case? THe destiny page.ts ? Just looking to the code that I posted, do you see anything wrong ? — Gabriel Burato
– Gabriel Burato, Commented Mar 13, 2018 at 20:11
I don't need a part of the app. I need a complete minimal example, as I just posted, but which actually reproduces the problem. — JB Nizet
– JB Nizet, Commented Mar 13, 2018 at 20:14
I didn't know the stackBlitz. I edited the code, including more content. angular-router-basic-example-khfegh.stackblitz.io — Gabriel Burato
– Gabriel Burato, Commented Mar 13, 2018 at 20:36

score 6 · Accepted Answer · 2018-03-13 20:36:35Z

6

The problem seems to be that you accidentally avoided to use an absolut path in your route.ts. Try this routes

export const ROUTES : Routes = [

    {path:'',component:AvisosComponent    },
    {path:'gerenciarModeloAviso', component:GerenciaModAvisoComponent },
    {path:'/editModeloAviso/:id/:action', component: EditModeloAvisoComponent  }   

]

in combination with this HTML-Part

<img src="../assets/editarOn.png" alt="Editar" [routerLink]="['/editModeloAviso',estrut.idAvisoEstrutura,'VIEW']" />

that should do.

edited Mar 13, 2018 at 20:36

answered Mar 13, 2018 at 20:31

user6749601

Sign up to request clarification or add additional context in comments.

3 Comments

Gabriel Burato Over a year ago

Tried, but give this error in browser console: Error: Invalid configuration of route '/editModeloAviso/:id/:action': path cannot start with a slash

user6749601 Over a year ago

Sorry, my bad. You're right. This construction is not supposed to work. I mixed something up.

Gabriel Burato Over a year ago

DiabolicWords, I changed the path, removing the bar and the implementation finally works! The correct path is: {path:'editModeloAviso/:id/:action', component: EditModeloAvisoComponent } Thanks a lot!

Collectives™ on Stack Overflow

Angular 2/4 - Passing multiple parameters in routerLink

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related