Angular跳转外部链接出现localhost前缀、https重复问题如何解决？

问题原因 #

• 当配置的URL不带http/https协议前缀时，浏览器会默认将其识别为站内相对路径，自动拼接当前站点的域名（也就是你遇到的localhost:4200前缀问题）
• 手动在模板硬编码https://前缀后，如果部分配置的URL本身已经自带了https://，就会出现协议重复的异常

修复方案 #

方案1：统一配置规范（优先推荐） #

直接将所有外部跳转链接的配置值改为带完整协议的格式，比如将原来的facebook.com/Myuseraccount改为https://facebook.com/Myuseraccount，模板保持原有写法即可：

<a target="_blank" href="{{socialFacebook.url}}">
      <mat-icon class='icons-svg' svgIcon="facebook-icon" ></mat-icon>
</a>

该方案不需要额外写逻辑处理，出错概率最低。

方案2：代码兼容处理（适用于配置无法统一修改的场景） #

如果你的配置中存在部分链接带协议、部分不带的情况，可以在组件中新增一个URL预处理方法，自动识别并补全协议，不会出现重复问题：

1. 组件ts文件中新增工具方法：

// 自动补全外部链接协议，避免重复拼接
getSafeExternalUrl(url: string): string {
  return url.startsWith('http') ? url : `https://${url}`;
}

2. 模板中调用该方法生成跳转地址：

<a target="_blank" [href]="getSafeExternalUrl(socialFacebook.url)">
      <mat-icon class='icons-svg' svgIcon="facebook-icon" ></mat-icon>
</a>

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