Как автоматически добавить http-префикс в href с помощью Angular 5

Question

Есть ли способ в angular 5 автоматически добавлять префикс http, если res.MyWebsiteURL его не содержит.

Я хотел бы иметь общий способ сделать это, так как я буду использовать во многих местах в проекте.

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

Есть ли способ сделать это через директиву?

большое спасибо

Answer 1

Я сделал PipeTransform
С PipeTransform, вы можете изменить строковый элемент по мере необходимости. В моем случае я хотел определить, включен ли префикс http в URL или нет. Если это не включать, я включу это.

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

В моем случае это сработало.

component.html:

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

component.ts:

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

Answer 3

Используйте двойную косую черту:

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