角6-< a> href附加到基本网址 [英] Angular 6 - <a> href gets appended to base url

问题描述

我在表中显示了一个用户列表，每个用户都有显示并可以导航到的链接.

I have a list of users displayed in the table and each users has link which is displayed and can be navigated to.

<div class="inline-icon-text">
  <small class="text-muted d-md-none mr-3">Link</small>
  <a [attr.href]="candidate.url" target="_blank" [title]="candidate.url">
    <i class="material-icons">open_in_new</i>
  </a>
</div>

问题是，当我检查链接元素时，它指向正确的地址，但单击后便被附加到应用程序的基本URL.

Problem is, when I inspect link element it points to correct address but after clicking on it gets appended to app base url.

<a _ngcontent-c15="" target="_blank" href="www.test.sk" title="www.test.sk">...</a>

单击后，将在地址为 localhost:4200/www.test.sk

我想念什么?

推荐答案

根据应用程序的协议，始终在绝对外部链接之前使用协议或//或https://的//快捷方式.

Always prepend your absolute external links with protocol or // shortcut for http:// OR https:// depending on your app's protocol.

<div class="inline-icon-text">
  <small class="text-muted d-md-none mr-3">Link</small>
  <a [attr.href]="'//' + candidate.url" target="_blank" [title]="candidate.url">
    <i class="material-icons">open_in_new</i>
  </a>
</div>

浏览器默认将URL视为相对URL，以便于应用内导航.

Browsers treat URLs as relative by default to facilitate in-app navigation.

请注意，此行为不是特定于Angular的；其他框架和普通站点的行为完全相同

As a side note, this behavior is not Angular-specific; other frameworks and plain sites behave exactly the same

这篇关于角6-< a> href附加到基本网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！