Angular中routerLink绑定方法持续触发，如何仅在点击/右键开新标签时执行？

你当前的写法将带有副作用的onSelect方法直接绑定到了routerLink的插值表达式中，Angular变更检测机制每次运行时都会重新计算模板绑定的表达式值，因此onSelect会被反复触发，这是框架的正常运行逻辑，并非语法错误。
同时你存在一个误解：给a标签绑定(click)事件只要不主动调用event.preventDefault()阻止默认行为，完全不会影响原生右键菜单的所有功能，左击跳转、右键打开新标签/新窗口等能力都会完整保留。

核心思路 #

将路由绑定和副作用逻辑拆分，routerLink仅绑定纯路由值避免变更检测触发副作用，用事件绑定实现点击/右键时的emit需求。

代码修改 #

HTML部分 #

<a 
  [routerLink]="['/你的路由前缀', prod?.key]"
  (click)="onSelect(prod)"
  (contextmenu)="onSelect(prod)"
>
  {{prod?.name}}
</a>

说明：

• 用方括号绑定routerLink传入路由数组，只要prod?.key不发生变化，变更检测不会重复执行逻辑
• (click)绑定处理左击场景，(contextmenu)绑定处理右键唤出菜单的场景，两个场景都会触发onSelect
• 没有阻止默认行为，a标签的所有原生功能完全保留

TS部分 #

onSelect(prod){
    setTimeout(() => {
        this.onSelectedEmmiter.emit(prod);
    }, 0);
}

如果你不希望右键唤出菜单时就触发onSelect，仅当用户实际选择「打开新标签」执行跳转时才触发，可以选择监听路由跳转事件：

1. 给路由配置添加prod key的参数声明
2. 在组件中注入Router监听NavigationStart事件，匹配到对应路由时取出参数中的prod key，查找对应prod实例后执行emit

注意：该方案仅能覆盖原页面内的跳转场景，右键打开新标签属于新开页面实例，原页面无法感知到新页面的路由跳转，无法触发原页面的emit逻辑。

内容的提问来源于stack exchange，提问作者userr not found