Question

虽然看起来微不足道，但我没有发现任何类似的情况这是我的路线：

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

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

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

准确地说，我的链接位于editor-component.html，当前网址为http://myapp.com/folder/:id/edit/form1

感谢您的帮助

Answer 1

尝试使用此./

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

docs的解释

第一个分段名称可以添加/，。/或../：


如果第一个段以/开头，路由器将从应用程序的根目录中查找路径。

如果第一个段以./开头，或者没有以斜杠开头，则路由器将查找当前激活路径的子节点。

如果第一段以../开头，路由器将上升一级。

我认为上面的数字＃2就是你想要实现的目标，而不是你在这里描述的内容：

当我在edit / form1页面上时，我找不到指定routerLink指令的方法，这样它只会更改：form值，而不会丢失parent：id值

修改

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

不幸的是，它不起作用:(。我得到folder/:id/edit/form1/edit/form2。也许我忘记了我的导航栏位于editor-component.html并且我当前的网址是http://myapp.com/folder/:id/edit/form1

由于导航栏位于editor-component.html，现在我们应该使用＆＃39; ../'相反，如下所示

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

说明：该链接位于子组件上，因此我们使用../上升一级，尝试这样思考：我们的当前时间为http://myapp.com/folder/:id/edit/form1，然后../将会补偿一级到http://myapp.com/folder/:id/edit/，所以现在我们只需要将form2添加到其中。

更新了示例代码Plunker

Answer 2

假设您在edit/form1页面，并且id变量中有folderId值，那么您可以在routerLink下方使用edit/form2：< / p>

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

Answer 3

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

此处this.route是ActivatedRoute的实例

希望是有帮助的，谢谢

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

3 个答案:

修改