Angular 11中如何实现点击按钮跳转外部网站URL？

问题根因 #

[routerLink] 是Angular内置的内部路由专用指令，仅支持跳转到当前应用配置过的内部路由路径，无法用于外部站点跳转，这是你代码不生效的核心原因。

修复方案 #

有两种常用实现方式：

方案1：a标签搭配按钮样式（更推荐，无障碍支持更好） #

替换button为原生a标签，使用href属性填写完整外部链接，再给标签添加项目内的按钮样式类即可，示例代码：

<a href="https://www.google.com" class="your-btn-class">
  Goto google
</a>

注意：外部链接必须携带完整的http://或https://协议头，否则会被浏览器识别为应用内相对路径

方案2：button绑定点击事件跳转 #

如果必须保留button标签，可以绑定click事件调用原生跳转API：

1. 先在对应组件的TS文件中添加跳转方法：

jumpToExternal() {
  // 新窗口打开外部链接用下面这行
  window.open('https://www.google.com', '_blank');
  // 若需要当前窗口跳转，替换为下面这行
  // window.location.href = 'https://www.google.com';
}

2. 修改模板中的按钮代码：

<button (click)="jumpToExternal()">
  Goto google
</button>

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