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

Question

如果 res.MyWebsiteURL 不包含前缀 http，角度 5 中是否有自动添加前缀的方法。

我想有一个通用的方法来做，因为我会在项目的很多地方使用。

<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

Use double forward slash:

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