CODEWITHSUNDEEP
angulartypescript
omarCreativeDev
omarCreativeDev

Reputation: 202

angular 2 routerLink with route params only works as a string

I have a route with params defined as
export const jobDetailsRoute: Route = { path: 'job-detail/:jobId/:jobTitle', component: JobDetailsComponent, };

which i import into my component like this
public readonly jobDetailsRoute: Route = jobDetailsRoute;

however when I reference the route as below it generates an invalid link
http://mydomain/job-detail/%3AjobId/%3AjobTitle/oNPj5fwK/Dynamics%20365%20Developer

<a [routerLink]="[ jobDetailsRoute.path, job.id, job.title ]" [translate]="'DASHBOARD.ANCHOR'"></a>

which throws the following error in the console
Cannot match any routes. URL Segment: 'job-detail/%3AjobId/%3AjobTitle/oNPj5fwK/Dynamics%20365%20Developer'

and when I generate the routerLink as a string I get a correct link http://mydomain:4200/job-detail/oNPj5fwK/Dynamics%20365%20Developer

<a [routerLink]="[ 'job-detail', job.id, job.title ]" [translate]="'DASHBOARD.ANCHOR'"></a>

any ideas where I am going wrong?

Upvotes: 1

Views: 1027

Answers (1)

Ankit Saroch
Ankit Saroch

Reputation: 690

The routerLink expects the path segments. So, in the first case when you use the jobDetailsRoute.path, the whole route with the dynamic segments are concatenated to generate the full route.

For instance ['/team', teamId, 'user', userName, {details: true}] means that we want to generate a link to /team/11/user/bob;details=true.

Source

Upvotes: 1

Related Questions