将NavigationExtras传递给模板中的routerLink

Ale*_*ski 10 angular2-template angular2-routing angular

我想在我的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>
Run Code Online (Sandbox Code Playgroud)

但它不起作用.

单击链接后,路径将更改为 http://localhost:4200/route2;skipLocationChange=true

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

Pie*_*Duc 20

没有办法(现在和afaik)既拥有routerLinkActiveskipLocationChange同时期望你想要的结果.根据api,您可以添加选项,但没有skipLocationChange选项.

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

更新

由于2.3.0-beta.0您可以将该skipLocationChange选项添加到该routerLink指令:

<li><a [routerLink]="['route1']" skipLocationChange>Route1</a></li>
Run Code Online (Sandbox Code Playgroud)


Yin*_*non 7

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

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>
Run Code Online (Sandbox Code Playgroud)

关于RouterLink属性的文档很清楚。

  • 您可以传递任何 `queryParams`、`fragment`、`queryParamsHandling`、`preserveFragment`、`skipLocationChange`、`replaceUrl`、`state` (在 router_link 指令的源代码中验证)https://github.com/angular/角度/blob/master/packages/router/src/directives/router_link.ts) (2认同)