Binding：附加到href

Question

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

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

不是这样会失败，并显示错误：

（（错误：无法在'Element'上执行'setAttribute'）

而且我不确定如何将{{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"