Angular 4 - Adding router param before url

Question

Just wondering whether there is a way to create a angular route with parameter before of in-between a url,

{path: ':param/test/list'} or {path: 'web/:param/list'}

and reference it in routerLink directive,

[routerLink]="['test/list', paramValue]"

Thee parameter value is always getting appended to the end of the url.

Daniel Segura Pérez · Accepted Answer · 2017-11-17 10:45:56Z

2

try this:

path: { ':parameter/test/list' }
[routerLink]="[paramValue + 'test/list']"

or

path: { 'test/:parameter/list' }
[routerLink]="['test/' + paramValue + '/list']"

answered Nov 17, 2017 at 10:45

Daniel Segura Pérez

1,1278 silver badges12 bronze badges

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

Comments

Mauricio Wanderley Martins · Accepted Answer · 2017-11-17 11:50:03Z

1

You should put parameter segment in same position to route. Something similar:

path: { ':parameter/test/list' }
[routerLink]="[paramValeu, 'test', 'list']"

Edit:

Separate segments in Route link.

edited Nov 17, 2017 at 11:50

answered Nov 17, 2017 at 10:04

Mauricio Wanderley Martins

10.2k2 gold badges13 silver badges18 bronze badges

2 Comments

guru Over a year ago

Thanks Martin. When I do this the '/' in the URL 'test/list' gets replaced with '%2F' which is the encoding reference for the slash character. Like - 'paramValue/test%2Flist

Mauricio Wanderley Martins Over a year ago

Well maybe you need to change route link: [routerLink]="[paramValeu, 'test', 'list']. Because route link use the route segments separate.

andrea06590 · Accepted Answer · 2017-11-17 10:14:47Z

0

I think this could help :) How to pass a parameter to routerLink that is somewhere inside the URL?

Always better to use router instead of [href]

Good luck

answered Nov 17, 2017 at 10:14

andrea06590

1,3093 gold badges11 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular 4 - Adding router param before url

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related