新标签上的 Angular 6 routerLink答案

【问题标题】：Angular 6 routerLink on a new tab新标签上的 Angular 6 routerLink
【发布时间】：2019-06-26 06:20:08
【问题描述】：

我正在尝试在新选项卡而不是当前页面上打开路由器链接，但目标 _blank 等常规 html 属性不起作用。

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

【问题讨论】：

Angular 2 Routing run in new tab的可能重复

标签： angular

【解决方案1】：

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

FullView

您可以在 routerLink 中定位 =“_blank”。它对我来说很好用。

【讨论】：

【解决方案2】：

有一个newer way of opening new tabs using routerLink，但在我看来，这仍然是一个更简单的选择，因为这两种方法仍然需要使用window.open()。

在你的 component.ts 上，

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

或者你的component.html上的这个

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

另一个有效的替代方法是编写您自己的自定义指令。在here 上查看它，该人已经编写了它的示例实现。

【讨论】：

关于window.open() 的说明：它并不总是适用于所有浏览器。除非放在 onClick 属性中，否则不允许在 Safari iOS 中使用。

【解决方案3】：

这是在组件中执行的另一种方式。

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>

【讨论】：

@Rwin +1 你找到解决方案了吗？
此解决方案的一个缺点是无法使用 CTRL + CLICK。真正的用户体验缺乏
@LYES-CHIOUKH 除非您也添加此解决方案：stackoverflow.com/a/45884676/2901207

【解决方案4】：

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

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

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

现在应该如何工作：

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

【讨论】：

【解决方案5】：

您可以将 target="_blank" 添加到您的链接中

它对我有用：

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

【讨论】：

使用 href 代替 routerLink 对我有用。使用 routerLink 我在目标和 rel 上遇到错误。