Angular 在模板中将NavigationExtras传递给routerLink

我想禁用在Angular 2应用程序中路由时更改URL

我知道

skipLocationChange:true

必须作为

NavigationExtras

参数传递给路由器

我的问题是:

是否可以从模板内部将NavigationExtras传递给routerLink？ 我所尝试的：

<h1>
  {{title}}
</h1>

<ul>
    <li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a></li>
    <li><a [routerLink]="['route2', { skipLocationChange: true }]">Route2</a></li>
</ul>

<router-outlet></router-outlet>

{{title}}

路线1
路线2

但它不起作用

单击链接后，路由更改为

http://localhost:4200/route2;skipLocationChange=true

我不想在我的控制器中使用

this.router.navigate（['route1]，{skipLocationChange:true）

，从那以后我就失去了

routerLinkAtive

高亮显示。

没有办法（现在和将来）同时启用

routerLinkActive

和

skipLocationChange

，并期望得到所需的结果。可以根据添加选项，但没有

skipLocationChange

选项

但是，您可以将路由器上的

NavigationExtras

与链接是否应处于活动状态结合使用，并以此为基础

更新

由于

2.3.0-beta.0

可以将

skipLocationChange

选项添加到

routerLink

指令：

<li><a [routerLink]="['route1']" skipLocationChange>Route1</a></li>

路由1

您可以在routerLink标记本身上提供任何NavigationExtras属性作为单个属性

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

路由链接属性上的

已清除。
skipLocationChange
属性默认为
false
。它将确保在浏览器中显示导航url。如果要隐藏导航url，
skipLocationChange
属性应设置为
true

它可以通过两种方式实现

将包含
skipLocationChange
属性的对象传递给路由器对象引用，如下所述：
this.router.navigateByUrl（'/someUrlPath'，{skipLocationChange:true}）

这应该在.ts文件中

将
skipLocationChange
指令应用于普通HTML锚定标记，如下所示：

乌尔的名字


谢谢。我将使用
路由器。导航（）
方法，并尝试以其他方式突出显示活动路由。@Alexanderciesilski我已更新了我的答案。使用最新版本的angular2，您可以做您想做的事情：）您可以传递任何
查询参数
，
片段
，
查询参数
，
保留片段
，
skipLocationChangeode>，
replaceUrl
，
状态
（在路由器链接指令的源代码中验证））