Angular2 set param of current route in routerLink

Question

Although it looks trivial, I didn't find any similar cases Here's my route :

{
    path: 'folder/:id',
    component: FolderComponent,
    children: [
        {
            path: 'edit/:form',
            component: 'EditorComponent'
        }
    ]
}

When I'm on edit/form1 page, I can't find the way to specify my routerLink directive so that it just changes the :form value, without losing the parent :id value. For now, I need to do that :

1 <a [routerLink]="['../../edit, 'form2']">Form2</a> to get two level up. This works. But it's not that elegant...

2 I tried ['edit', 'form2'], it brings me to folder/:id/edit/form1/folder/form2

3 If I do ['/edit', 'form2'], I get /folder/form2

4 I even tried ['', 'form2'], I get /form2

edit :

5 As suggested I tried ['./edit', 'form2'], but it gives me folder/:id/edit/form1/edit/form2

Just to precise, my link is in editor-component.html and the current url is http://myapp.com/folder/:id/edit/form1

Thx for your help

Irritation

Answer 1

Try using this ./

<a [routerLink]="['./edit, 'form2']">Form2</a>

Explanation from docs

The first segment name can be prepended with /, ./, or ../:

1. If the first segment begins with /, the router will look up the route from the root of the app.
2. If the first segment begins with ./, or doesn't begin with a slash, the router will instead look in the children of the current activated route.
3. And if the first segment begins with ../, the router will go up one level.

I think number #2 above is what you trying to achive, from what you are describing here :

When I'm on edit/form1 page, I can't find the way to specify my routerLink directive so that it just changes the :form value, without losing the parent :id value

---

EDIT

Edit in response to OP comment here :

Unfortunately, it doesn't work :(. I get folder/:id/edit/form1/edit/form2. Maybe I forgot to precise that my navbar is on editor-component.html and my current url is http://myapp.com/folder/:id/edit/form1

Since the navbar is on editor-component.html, now we should use '../' instead, like below

 <a [routerLink]="['../form2']">Go To Form 2 From Editor {{id}}</a>

Explanation : The link is on the child componenet, so we use ../ to up one level, try to think like this : our current is http://myapp.com/folder/:id/edit/form1 then ../ will make it up one level to http://myapp.com/folder/:id/edit/, so now we just need to appendform2 into it.

Updated Sample code Plunker

Wilderness

Unfortunately, it doesn't work :(. I get folder/:id/edit/form1/edit/form2. Maybe I forgot to precise that my navbar is on editor-component.html and my current url is http://myapp.com/folder/:id/edit/form1 – Irritation

Ok, it works :). I didn't take the problem this way, I thought I always had to provide both params : the route and the param. – Irritation

Answer 2

Let say you are on edit/form1 page and you have id value in folderId variable then you can use below routerLink to go to edit/form2 :

<a [routerLink]="['folder', folderId ,'edit', 'form2']">Form2</a>

Killick

Useful to know it can be done like that. The problem is that I don't have access to folderId in the child component (EditorComponent) and I pref not having to pass as input binding :/. Any other solution, or the #1 is the only ? thx – Irritation

Answer 3

You can also use relativeTo property, like :- this.router.navigate(['edit'], {relativeTo:this.route})

Here this.route is an instance of ActivatedRoute

Hope is helps, thanks

Unnatural