Angular 8中捕获右键新标签页打开链接事件并调用函数

直接捕获浏览器右键菜单里“在新标签页打开”的原生事件是做不到的，但可以通过以下两种方式实现你的需求：

方案一：动态绑定href（推荐，保留原生体验） #

这种方式利用浏览器原生行为，同时实现运行时生成链接的需求：

1. 在组件中新增一个方法，专门生成运行时的链接地址：

getCampaignUrl(c: any): string {
  // 这里写你的链接生成逻辑，比如根据c的属性拼接地址
  return `/campaigns/${c.id}`; // 示例路由地址，外部链接直接写完整URL即可
}

2. 修改模板代码，用属性绑定动态设置href，同时保留左键点击的事件处理：

<a [href]="getCampaignUrl(c)" (click)="campaignLink(c, $event)">{{c.name}}</a>

• 右键选择“在新标签页打开”时，浏览器会直接使用href里的动态地址，无需额外处理
• 如果左键点击需要自定义逻辑而非直接跳转，记得在campaignLink中调用$event.preventDefault()阻止默认跳转行为

如果是内部Angular路由，也可以用动态routerLink替代href：

<a [routerLink]="['/campaigns', c.id]" (click)="campaignLink(c, $event)">{{c.name}}</a>

右键新标签页打开时同样会正确跳转到对应路由。

方案二：自定义右键菜单（不推荐，破坏原生体验） #

如果你一定要在右键触发时调用campaignLink，可以监听contextmenu事件，替换原生右键菜单：

1. 模板代码：

<a (contextmenu)="handleRightClick(c, $event)" (click)="campaignLink(c, $event)">{{c.name}}</a>

2. 组件中实现处理方法：

handleRightClick(c: any, event: MouseEvent) {
  event.preventDefault(); // 阻止原生右键菜单弹出
  // 调用campaignLink，假设该方法返回生成好的链接
  const targetUrl = this.campaignLink(c, event);
  // 打开新标签页
  window.open(targetUrl, '_blank');
}

这种方式会完全替换浏览器原生右键菜单，用户体验较差，仅在特殊场景下使用。

注意：原代码中的routerLink="[]"是无效配置，需要删除或替换为正确的动态路由表达式。

内容的提问来源于stack exchange，提问作者Mayank Gupta