如何使用 Angular 5 在 href 中自动添加 http 前缀

Question

有没有办法在角度 5 中自动添加前缀 http 如果 res.我的网站网址不包含它。

我希望有一种通用的方法，因为我将在项目中的许多地方使用。

<a  target="_blank" href="http://{{res.MyWebsiteURL}}">Visit My Website</a>

有没有办法通过指令做到这一点？

多谢

Answer 1

我做了一个PipeTransform。使用 PipeTransform，您可以根据需要修改字符串元素。就我而言，我想确定 url 中是否包含 http 前缀。如果不包括，我会包括它。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'linkHttp'
})
export class LinkHttpPipe implements PipeTransform {
  transform(href: string) {
    return href.startsWith("http://") || href.startsWith("https://") ? href : "http://" + href
  }
}

这是如何使用它

<a  target="_blank" href="{{res.MyWebsiteURL | linkHttp}}">Visit My Website</a>

特别感谢JBNizet的帮助

Answer 2

就我而言，这工作正常。

组件.html：

<a [href]="getSubdomainLink(element)" target="_blank"> 
{{element.subDomain}} </a> 

组件.ts：

getSubdomainLink(element: any) {
    return String(element.subDomain).startsWith('http') ? 
    element.subDomain : 'http://' + element.subDomain;
}   

Answer 3

使用双正斜杠：

<a [href]="'//' + url">link</a>