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

Question

我有一个定义imageUrl属性的组件,在我的模板中,我使用此属性来设置图像的URL.我尝试使用插值和使用属性绑定,两者都工作,但我找不到两者之间的任何差异,或何时使用一个而不是另一个.有谁知道这个区别？

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

Answer 1

Angular评估双花括号中的所有表达式,将表达式结果转换为字符串,并将它们与相邻的文字字符串连接起来.最后,它将此复合插值结果分配给元素或指令/组件属性.- 来自https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

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

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

Answer 2

插值使用{{表达式}}将绑定值呈现到组件的模板。插值是Angular转换为属性绑定的一种特殊语法

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

范例：

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

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

插值而不是属性绑定，无论isDisabled类属性的值为true还是false，该按钮将始终处于禁用状态。

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

规范形式，是方括号的替代语法。

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