Angular锚点标签无法正常在新标签页打开页面，求解决方案

核心问题分析 #

你当前的代码逻辑完全搞反了：urlByEnvironment()方法直接在调用时执行window.open，而Angular在初始化绑定[href]时会自动执行这个函数，所以页面一加载就弹出新标签页；同时这个方法没有返回任何URL，导致[href]的值是undefined，点击链接时浏览器会默认刷新当前页面。

最优解决方案（语义化+正常行为） #

1. 修改组件方法，让它返回目标URL而不是直接打开窗口：

urlByEnvironment = () => {
  return this.environment.options.urls;
};

2. 在HTML标签里绑定[href]并添加target="_blank"属性：

<a [href]="urlByEnvironment()" target="_blank">{{ 'main.journey.return-link' | translate }}</a>

这样页面加载时不会自动打开窗口，点击链接会正常在新标签页打开目标URL，同时链接的默认样式（手型指针、下划线）都会保留。

如果你想用(click)事件的替代方案 #

如果因为某些原因必须用点击事件触发，要解决样式问题可以手动补全链接样式：

1. 组件方法保留打开窗口的逻辑：

openTargetUrl = () => {
  window.open(this.environment.options.urls, '_blank');
};

2. HTML标签里保留href属性（避免样式异常）并绑定点击事件：

<a href="javascript:void(0)" (click)="openTargetUrl()" style="cursor: pointer; text-decoration: underline; color: blue;">
  {{ 'main.journey.return-link' | translate }}
</a>

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