Question

我正在尝试使用锚标记重定向到外部url，但是angular试图在应用程序内部路由它。无论如何，是否有重定向到外部url而不使用指令，也没有在其中添加http：//或https：//。

示例：

<a href="{{ link }}"
rel="noopener noreferrer"
target="_blank">
    {{ link }}
</a>

链接可以解析为没有协议的URL。例如“ www.example.com”。

Answer 1

您可以将//添加到URL的开头而不使用http

<a href="//{{ link }}"
rel="noopener noreferrer"
target="_blank">
    {{ link }}
</a>

Answer 2

您可以仅使用href而不指定协议，并确保不提供相对网址：因此，您的{{link}}将不包含http或https，而仅包含// 使用：

<a href="{{ link }}"
rel="noopener noreferrer"
target="_blank">
    {{ link }}
</a>

例如：<a href="//www.example.com">Example</a>

Answer 3

如果您不知道您的 href 是否包含 http(s)，您可以使用此管道进行转换

@Pipe({
    name: 'externalHref'
})
export class ExternalHrefPipe implements PipeTransform {

    transform(href: string): string {
        return /^https?/.test(href) ? href : `//${href}`;
    }
}

在 html 中：

<a  
   [attr.href]="href | externalHref" 
   target="_blank">
     Visit Website
</a>

Angular 7-无需使用指令即可重定向到外部网址

3 个答案: