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 ../:
- If the first segment begins with /, the router will look up the route from the root of the app.
- 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.
- 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
的实例
希望对你有所帮助,谢谢
虽然看起来很琐碎,但是我没有找到类似的案例 这是我的路线:
{
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 ../:
- If the first segment begins with /, the router will look up the route from the root of the app.
- 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.
- 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 oneditor-component.html
and my current url ishttp://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
希望对你有所帮助,谢谢