绑定：附加到 href

Question

在我的 Angular 2 测试应用程序中，我试图附加一个 id 以下内容作为我的 HTML 模板的一部分：

<a href="https://www.domainname.com/?q="+{{text.id}}>URL</a>

这不是因为错误而失败：

(Error: Failed to execute 'setAttribute' on 'Element')

我不确定如何将 {{text.id}} 添加到此 URL。

我需要在我的组件中执行此操作，还是可以在 HTML 模板中以某种方式完成？

顺便说一句，正如人们所期望的那样，这工作得很好（但这不是我想要做的，我需要将 text.id 附加到 url）：

<a href="https://www.domainname.com/?q=">{{text.id}}</a>

有什么建议吗？

Answer 1

使用其中之一：

<a href="https://www.domainname.com/?q={{text.id}}">URL</a>

或（来自official docs）：

<a [href]="'https://www.domainname.com/?q=' + text.id">URL</a>

---

关于这个问题，重要的是要注意： 错误消息具有误导性。

当您使用 {{ expression }} 时，angular 将计算 expression 并将其值放在 {{}} 所在的位置。所以你不需要像你那样将 {{}} 的结果 + 到字符串。换句话说：

<a href="something="+{{ expression }}> WRONG </a>

<a href="something={{ expression }}"> RIGHT </a>
<a [href]="'something=' + expression"> RIGHT </a>

Answer 2

或者，您可以使用以下语法：

[attr.href]="'https://www.domainname.com/?q=' + text.id"

---

当您想绑定到像

这样的变量时，这可能是首选方式

url: string = 'https://www.domainname.com';

然后将受

约束

[attr.href]="url"

Answer 3

对我有用 (angular 8-7-6-5):

1. 发送邮件
2. +911234567890
3. 打开Google

Answer 4

我遇到过它不起作用的情况 <a href="{{environment.urls.rclUrl}}"> 但是 <a href="{{rclUrl}}"> 与定义一起工作 ts 文件中的 rclUrl = environment.urls.rclUrl