Angular中如何动态修改href属性，为API返回的无协议链接自动补全https

方案1：使用Angular自定义管道（推荐，可复用） #

这是Angular生态下处理视图数据转换的最佳实践，一次定义可以在全项目任意模板中使用：

1. 首先创建自定义管道 url-with-protocol.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'urlWithProtocol',
  pure: true // 纯管道，仅当输入值变化时才重新计算，性能更高
})
export class UrlWithProtocolPipe implements PipeTransform {
  transform(url: string): string {
    if (!url) return '';
    const trimmedUrl = url.trim();
    // 判断是否已经带有http/https协议
    if (/^https?:\/\//i.test(trimmedUrl)) {
      return trimmedUrl;
    }
    // 无协议则默认添加https前缀
    return `https://${trimmedUrl}`;
  }
}

2. 在你的模块的 declarations 数组中注册这个管道
3. 模板中直接使用即可：

<ul>
  <li *ngFor="let item of items">
    <a href="{{item.link | urlWithProtocol}}" target="_blank">{{item.name}}</a>
    <span *ngIf="item.Description" class="text-muted"> {{item.Description}}</span>
  </li>
</ul>

方案2：接口请求返回后预处理数据 #

如果你的项目很小，不想额外创建管道，也可以在拿到接口返回的items数组时统一处理：

// 接口请求成功后的回调逻辑
this.apiService.getItems().subscribe((res: any) => {
  this.items = res.map(item => {
    if (!item.link) return item;
    const trimmedLink = item.link.trim();
    item.link = /^https?:\/\//i.test(trimmedLink) ? trimmedLink : `https://${trimmedLink}`;
    return item;
  })
})

模板不需要做任何修改，直接沿用原来的写法即可。

原方案失效原因说明 #

你之前直接添加//前缀的方式属于协议相对路径，会自动继承当前页面的访问协议，但如果原链接已经带有https://前缀，拼接后会变成//https://xxx.com的错误格式，自然无法正常跳转。

内容的提问来源于stack exchange，提问作者A. Azfar