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

Question

如果res.MyWebsiteURL不包含它，则在角度5中有一种方法可以自动添加前缀http。

我希望有一个通用的方法来实现它，因为我将在项目的许多地方使用。

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

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

非常感谢

Answer 1

我做了一个PipeTransform 使用PipeTransform，您可以根据需要修改字符串元素。在我的情况下，我想确定是否在网址中包含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

使用双正斜杠：

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