Angular2 在 routerLink 中设置当前路由的参数

Angular2 set param of current route in routerLink

虽然看起来很琐碎,但是我没有找到类似的案例 这是我的路线:

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

当我在 edit/form1 页面上时,我找不到指定我的 routerLink 指令的方法,因此它只更改 :form 值,而不会丢失父 :id 价值。 现在,我需要这样做:

1 <a [routerLink]="['../../edit, 'form2']">Form2</a> 升两级。 这有效。但这不是那么优雅...

2 我试过了 ['edit', 'form2'],它把我带到了 folder/:id/edit/form1/folder/form2

3 如果我这样做 ['/edit', 'form2'],我得到 /folder/form2

4 我什至试过 ['', 'form2'],我得到 /form2

编辑:

5 按照建议我尝试了 ['./edit', 'form2'],但它给了我 folder/:id/edit/form1/edit/form2

准确地说,我的link在editor-component.html,现在的url是http://myapp.com/folder/:id/edit/form1

谢谢你的帮助

假设您在 edit/form1 页面上并且您在 folderId 变量中有 id 值,那么您可以使用下面的 routerLink 转到 edit/form2 :

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

试试这个 ./

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

来自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.

根据您在此处描述的内容,我认为上面的数字 #2 是您想要实现的目标:

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


编辑

在此处编辑以回应 OP 评论:

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

由于导航栏在 editor-component.html 上,现在我们应该使用 '../' 代替,如下所示

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

解释:link在子组件上,所以我们用../上一层,试着这样想:我们当前是http://myapp.com/folder/:id/edit/form1然后是../ 会将其补上一层到 http://myapp.com/folder/:id/edit/,所以现在我们只需要将 form2 添加到其中即可。

更新示例代码 Plunker

您也可以使用 relativeTo 属性,例如:- this.router.navigate(['edit'], {relativeTo:this.route})

这里this.route是ActivatedRoute

的实例

希望对你有所帮助,谢谢