Question

我正在尝试在新标签页而非当前页面上打开routerlink，但是常规html属性（例如target _blank）无法正常工作。

<span routerLink="/custompage/{{city.id}}"  class="badge badge-primary badge-pill">open</span>

Answer 1

这是在组件内执行操作的另一种方法。

openCityInNewWindow(city) {
  // Converts the route into a string that can be used 
  // with the window.open() function
  const url = this.router.serializeUrl(
    this.router.createUrlTree([`/custompage/${city.id}`])
  );

  window.open(url, '_blank');
}

HTML看起来像

<ul *ngFor="let city of cities">
  <li (click)="openCityInNewWindow(city.id)">{{city.name}}</li>
</ul>

Answer 2

我认为routerLink无法与新标签页/窗口一起使用。

您将因此而拥有更好的运气，在您的component.ts上，

window.open(url, '_blank');

或在您的component.html上

<a href="www.domain.com/custompage/{{city.id}}" target="_blank">

但是，如果必须使用routerLink，则还有其他方法，例如编写自己的自定义指令。通过here进行检查，该人已经编写了一个示例实现。

Answer 3

我找到了解决方案并将其修复如下

FullView

您可以在 routerLink 中 targe="_blank"。它对我来说很好。

Answer 4

您可以将target =“ _ blank”添加到您的链接

对我有用：

 <a routerLink="/News" routerLinkActive="active" target="_blank" rel="bookmark"></a>

Answer 5

我遇到了完全相同的问题，我想我已经找到了两全其美的方法。

将您的DIV，SPAN更改为A标签。添加href链接，但保留routerLink。

<a routerLink="/custompage/{{city.id}}"  href="/custompage/{{city.id}}" class="badge badge-primary badge-pill">open</a>

现在应该如何工作：

左键->转到相应的路线/页面，而无需重新加载；
右键单击->在新标签页/窗口选项中打开，使用此导航时自然会加载新页面

Angular 6 routerLink在新选项卡上

5 个答案: