Angular 2 routerLink in parent component relative to child route?

Question

I have:

Main component
-- First-Child component with parameter
-- Second-Child component

The path of the First-Child and it's parameter: http://localhost/mpm/0776452c

Second-Child path should be: http://localhost/mpm/0776452c/settings

My problem is that I want to put the link for Second-Child component in Main component.

I tried this way: [routerLink]="'./settings'" but the generated link has round brackets in the end for some reason: http://localhost/mpm/0776452c/(settings)

Do you have idea how to fix this the easy way, because now I generate full path to Second-Child component ?

Thank you!

Edit: The link for Second-Child component is placed in Main component. The idea is when I'm in First-Child component (http://localhost/mpm/0776452c) I want to click on [routerLink]="'./settings'" which is in Main component so I can go to http://localhost/mpm/0776452c/settings

Edit 2 - my router config

{
  path: '',
  component: MainComponent,
  canActivate: [AuthGuard],
  children: [
    {
      path: 'mpm/:id',
      component: FirstChild,
      canActivate: [AuthGuard]
    },
    {
      path: 'mpm/:id/settings',
      component: SecondChild,
      canActivate: [AuthGuard]
    }
  ]
}

Can you specify your problem a little bit more? What do you mean by "put the link" ? Do you need to use the new link in first child component? Like, getting "settings" parameter into first child? — Tuna Yagci
The link for Second-Child component is placed in Main component. The idea is when I'm in First-Child component (localhost/mpm/0776452c) I want to click on [routerLink]="'./settings'" which is in Main component so I can go to localhost/mpm/0776452c/settings — Свободен Роб
Hey, can you post here your router configs? I'm really interested why its putting those brackets. Second idea, you can navigate to id/settings within the routerlink.(07xxx/settings) I think router is kinda confused about the state. — Tuna Yagci
I updated my question. I already implemented solution, but I want to know is there other way. — Свободен Роб
As Steveadoo said you could make secondchild a child of first child, then router should do this automagically. Or generate full path, i don't think there is another way. — Tuna Yagci

Steveadoo Steveadoo · Accepted Answer · 2017-01-12T13:53:18

If you use "./settings" as your route, it's going to try to navigate to a child of FirstComponent, you need to use "../settings", but even that won't work.

You'll probably have to rework how you do the way your routes work, and make SecondComponent a child of FirstComponent in the routes.

If you try to navigate to ../settings, the parent route is going to be /mpm, so it'll resolve to /mpm/settings, not /mpm/:id/settings. The only other way it could work is if you change your routerLink to something like:

routerLink="../{{id}}/settings"

P.S, if you don't want to bind to a value, you can omit the brackets. That way you don't have to wrap your values in quotes.

Angular 2 routerLink in parent component relative to child route?

1 Answers