Question

我希望在Angular 2应用中路由时禁用更改网址。

我知道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>

但它不起作用。

点击链接后，路线将更改为http://localhost:4200/route2;skipLocationChange=true

我不想在我的控制器中使用this.router.navigate(['route1], {skipLocationChange: true)，因为我失去了routerLinkAtive突出显示。

Answer 1

~~没有办法（现在和afaik）同时拥有routerLinkActive和skipLocationChange并期望你想要的结果。根据{{3}}，您可以添加选项，但没有skipLocationChange选项。~~

但是，您可以将路由器中的NavigationExtras与api结合使用，并根据该链接是否应该处于活动状态

<强>更新

从2.3.0-beta.0开始，您可以将skipLocationChange选项添加到routerLink指令中：

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

Answer 2

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

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

RouterLink属性上的documentation 很清楚。

Answer 3

skipLocationChange属性默认为false。它将确保在浏览器中显示导航URL。如果我们要隐藏导航网址，则应将skipLocationChange属性设置为true。

可以通过两种方式实现。

将包含skipLocationChange属性的对象传递到路由器对象引用，如下所述：

this.router.navigateByUrl（'/ someUrlPath'，{skipLocationChange：true}）;

这应该在.ts文件中

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

NameOfTheUrl

将NavigationExtras传递给模板中的routerLink

是否可以从模板内部将NavigationExtras传递给routerLink？

3 个答案: