Angular中*ngFor渲染的锚点链接左键点击无响应问题

问题根源 #

• 模板里用{{ getLink(item) }}插值绑定href，Angular变更检测会频繁触发getLink方法，导致DOM节点状态不稳定，左键点击时可能链接还没完成绑定，同时触发控制台"Node cannot be found in the current page."警告。
• 若项目用了Angular Router或全局点击事件监听，普通<a>标签的默认跳转行为可能被拦截，右键新标签页绕开了拦截逻辑所以能正常打开。

解决办法 #

1. 改用属性绑定+预生成链接（推荐） #

先把链接提前生成好，避免模板里频繁调用方法：

// 组件代码
ngOnInit() {
  // 给每个item预先生成link属性
  this.items = this.items.map(item => ({
    ...item,
    link: this.getLink(item)
  }));
}

private getLink(item: any): string {
  // 保留你的链接生成逻辑，记得补全协议前缀（http/https）
  let url = item.targetUrl;
  if (!url.startsWith('http')) {
    url = `https://${url}`;
  }
  return url;
}

模板里用属性绑定[href]替代插值，更稳定：

<div *ngFor="let item of items">
  <a [href]="item.link" target="_blank">
    {{ item.id }}
  </a>
</div>

2. 排查全局事件拦截 #

检查项目里有没有全局的点击事件监听（比如document.addEventListener('click', ...)）或者自定义指令，是否阻止了<a>标签的默认跳转。如果有，给这些外部链接加个类名做例外：

<a [href]="item.link" target="_blank" class="skip-intercept">
  {{ item.id }}
</a>

然后在全局事件处理里跳过：

document.addEventListener('click', (e) => {
  if ((e.target as HTMLElement).closest('.skip-intercept')) {
    return; // 不拦截这个链接的默认行为
  }
  // 其他原有逻辑
});

3. 直接用属性绑定（快速测试） #

如果不想改组件逻辑，先把模板里的插值换成属性绑定试试：

<div *ngFor="let item of items">
  <a [href]="getLink(item)" target="_blank">
    {{ item.id }}
  </a>
</div>

不过还是推荐预生成链接，避免模板频繁执行方法影响性能和稳定性。

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