Angular问题：打开外部URL时当前页面自动跳转到首页

问题根源是Angular会默认把<a>标签当作路由导航元素处理——即便你绑定了click事件打开新标签页，标签本身的默认跳转行为仍会触发，最终导致当前页面跳转到首页。

下面是几种可行的解决方法：

方法1：阻止默认事件 #

修改HTML和TS代码，在点击事件中手动阻止<a>标签的默认跳转行为：

xyz.html

<a (click)="goToLink('https://www.example.com/abc', $event)">page link</a>

xyz.ts

goToLink(url: string, event: Event) {
  event.preventDefault(); // 拦截默认跳转行为
  window.open(url, "_blank");
}

方法2：给<a>标签添加无效href #

给<a>标签设置href="javascript:void(0)"，直接禁用其默认跳转逻辑：

xyz.html

<a href="javascript:void(0)" (click)="goToLink('https://www.example.com/abc')">page link</a>

TS代码保持原有的goToLink方法即可。

方法3：直接使用原生HTML属性（推荐） #

如果不需要额外业务逻辑，直接用<a>标签的原生href和target属性，完全绕开Angular路由的干扰，这是最简洁标准的实现方式：

xyz.html

<a href="https://www.example.com/abc" target="_blank">page link</a>

这种方式不需要编写TS里的goToLink方法。

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