html - Angular 6 - <a> href 被附加到基本 url

Question

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

<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。

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

点击后它会在地址为 localhost:4200/www.test.sk 的新标签页中打开

我错过了什么？

Answer 1

始终在您的绝对外部链接前添加协议(protocol)或 // 快捷方式 http:// 或 https://，具体取决于您的应用程序协议(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 以促进应用内导航。

附带说明一下，这种行为不是 Angular 特有的；其他框架和普通站点的行为完全相同