将 NavigationExtras 传递给模板中的 routerLink

Question

我想在我的 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>

但它不起作用。

点击链接后，路线变为

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

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

this.router.navigate(['route1], {skipLocationChange: true)

，从那以后我就失去了

routerLinkAtive

突出显示。

Answer 1

没有办法（现在和afaik）同时拥有

routerLinkActive

和

skipLocationChange

并期待你想要的结果。可以按照api添加选项，但是没有

skipLocationChange

选项

然而，您可以将来自路由器的

NavigationExtras

与ActivatedRoute结合使用，并基于该链接是否应该处于活动状态

更新

因为

2.3.0-beta.0

你可以添加

skipLocationChange

选项到

routerLink

指令：

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

Answer 2

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

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

RouterLink 属性的文档 很清楚。

Answer 3

skipLocationChange

属性默认为

false

。它将确保在浏览器中显示导航 url。如果我们想隐藏导航 url，

skipLocationChange

属性应该设置为

true

.

可以通过两种方式实现。

1. 将包含

   skipLocationChange

   属性的对象传递给路由器对象引用，如下所述：

   this.router.navigateByUrl('/someUrlPath', { skipLocationChange: true });
   

这应该在组件里面

.ts

文件

2. 使用

   skipLocationChange

   指令将

   <a>

   指令应用于 HTML

   routerLink

   锚标记，如下所示：

   <a [routerLink]="['someUrlPath']" [skipLocationChange]="true"> NameOfTheUrl</a>
   

这将在模板

.html

文件中。

Answer 4

我在 angular v12 工作，这对我有用。我也在使用一个命名的路由器插座，所以我不想看到它产生的难看的 url。

 <button type="button"
  [routerLink]="['/home', { outlets: {subpanel: ['sub-panel']}}]"
  (click)="onShowSubPanel()"
  [skipLocationChange]="true">
  Show Sub-Panel
</button>