使用角度导航时，在新选项卡中打开链接未在新选项卡中打开答案

【问题标题】：Open link in new tab not opening in new tab when using navigate in angular使用角度导航时，在新选项卡中打开链接未在新选项卡中打开
【发布时间】：2020-09-02 05:55:11
【问题描述】：

在 HTML 页面中

<h2 class="entry-title"><a href="javascript:void(0)" (click)="moreInfo(fashion)">{{fashion.postName}}</a></h2>

在 Component.ts 中

moreInfo(data) {
    this.router.navigate(['/blog-info/', data.postName]);
  }

【问题讨论】：

这能回答你的问题吗？ How to open link in new tab in angular 5
否，因为在那个问题中，用户在 html 页面中使用 [routerLink]。但我正在使用组件中的 this.router.navigate。
是的，但Router#navigate 等价于routerLink 属性。
正确，但是当我点击链接时，它会调用moreInfo() 然后它会导航，但是当右键点击链接并想在新标签中打开时不起作用。
那是因为你使用了点击监听器……这和使用href属性不一样。

标签： angular

【解决方案1】：

您需要在 HTML 中添加目标属性

<h2 class="entry-title"><a target="_blank" href="javascript:void(0)" (click)="moreInfo(fashion)">your template expression</a></h2>

【讨论】：

当右键单击在新标签页中打开时，这会在 URL 中显示：blank#blocked
关于：空白#blocked
你为什么不使用 window.open(link, '_blank');
同意，但我不想每次都在新标签中打开，就像用户只想在新标签中打开一样。
你如何区分用户是否想在新标签页中打开？

【解决方案2】：

如果你想这样做，你应该有href 属性。所以，routerLink 是一个不错的选择。其他方式：

<h2 class="entry-title"><a href="/blog-info/{{fashion.postName}}" (click)="moreInfo($event, fashion)">{{fashion.postName}}</a></h2>

moreInfo(event, data) {
    event.preventDefault();
    this.router.navigate(['/blog-info/', data.postName]);
}

【讨论】：

【解决方案3】：

在 routerLink 中调用函数。在组件中创建函数：

moreInfo(data) {
     return  data.postName.replace(/\s/g, '-') + '-' + data._id;
  }

在 routerLink 中这样使用：

[routerLink]="['/blog-info', moreInfo(fashion)]"

【讨论】：