Javascript 插值和属性绑定之间的区别

我有一个组件，它定义了一个

imageUrl

属性，在我的模板中，我使用这个属性来设置图像的url。 我尝试使用插值和属性绑定来实现这一点，这两种方法都很有效，但我找不到两者之间的任何区别，也找不到何时使用两者之间的区别。有人知道其中的区别吗

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

Angular计算双大括号中的所有表达式，将表达式结果转换为字符串，并将它们与相邻的文字字符串连接起来。最后，它将此复合插值结果指定给元素或指令/组件属性。-从

属性绑定不会将表达式结果转换为字符串

---

因此，如果需要将字符串以外的内容绑定到指令/组件属性，则必须使用属性绑定。

插值使用{{expression}}将绑定值呈现到组件的模板。 插值是一种特殊语法，可以将角度转换为属性绑定

属性绑定使用[]将值从组件发送到模板。 属性绑定：要将元素属性设置为非字符串数据值，必须使用属性绑定

例如：

我们通过绑定到布尔属性isDisabled来禁用按钮

<button [disabled]='isDisabled'>Try Me</button>

试试我

插值而不是属性绑定，无论isDisabled类属性值为true还是false，按钮都将始终被禁用

<button disabled='{{isDisabled}}'>Try Me</button>

试试我

标准形式，是方括号的另一种语法

 <button bind-disabled='isDisabled'>Try Me</button>

试试我

使用属性绑定，您可以使用属性的精确值设置属性，现在使用插值，您可以在字符串中混合来自模型的动态内容，因此使用插值（例如：

src=“http://{url}}”

）是的，就像Andre提到的一样，属性绑定不允许模板/连接现有字符串，它必须是精确的。但是，通过插值，你可以围绕你所拥有的东西建立模板。