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

问题描述

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

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

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

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

点击后，它会在地址为 localhost:4200/www.test.sk

的新标签中打开

我想念什么?

解决方案

始终在绝对外部链接前面加上协议或 // 快捷方式 http:// 或 https:// 取决于您应用的协议.

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

浏览器默认将网址视为相对网址，以方便应用内导航.

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

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>

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>

And after click it gets opened in the new tab with address localhost:4200/www.test.sk

What do I miss?

解决方案

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>

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

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

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