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

Posted 2023-03-05

【中文标题】使用角度导航时，在新选项卡中打开链接未在新选项卡中打开

【英文标题】：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属性不一样。

【参考方案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)]"