关于Angular的属性绑定，[]和{{}}的差异

当我们查看Angular的代码，需要给属性绑定一个变量时，一会用
[property]="variable"，一会用
property="{{variable}}"，有时候还有
[attr.property]，究竟他们有什么区别？

先把结论搁在这
Angular 官方文档在绑定属性几乎都是使用[]，而插值表达式{{}}更多是用于显示，两者最大的区别就是后者会将{{}}语句里执行完的值再转换string 类型。

[] & {{}}

实践是检验真理的唯一标准，先写一个简单的测试component

@Component({
selector: 'my-here',
template: `
2333333333333333{{here}}`
})
export class HereComponent {
@Input() here: any;
@Input() whichone: string;
ngOnChanges(change){
console.log(this.here)
console.log(change)
}
}

使用它


---------------------------


poo是一个string，并且我们通过input 或者button 改变poo 的值，两者在页面的显示和在控制台的打印都正常，看起来并没有差异。
可是我们发现，当poo 还没赋值的时候，前者打印是的undefined，后者是&＃8221;空字符串，估计是后者把undefined 换成&＃8221;，却又并不是单纯的转换类型，因为undefined 转string 的话应该是字面量&＃8217;undefined&＃8217;，但是可以确定的是通过{{}}获得的一定是string 类型。

试试给poo 送一个object，{{}}得到的是&＃8221;[object Object]&＃8221;，证实了我们的猜想。

[attr.Attribute] 和 基本属性

那Angular 里还有一种attribute 绑定，写法是[attr.Attribute]="variable"，那这个[property]="variable"又有什么区别呢？
首先我们得搞清楚Dom的property(属性) 和 attribute(特性)，简单来说

• property指的是DOM中的属性，是Javascript里的对象；
• attribute指的是HTML标签上的特性，它的值只能够是字符串；
• DOM中的有一个attribute的属性，其中就是html标签上的特性列表；
• 两者之间的数据绑定是单向的，更改attribute会同步到property，但反之则不然；
• 更改property和attribute的值，都会将更新反映到HTML页面中；

例如有一个element var testElm = document.getElementById('test')
这个element 的id 特性是 testElm.getAttribute('id')，而它的id 属性是testElm.id
DOM element 只有基本特性会有一一对应的属性，例如id、title等，如果我们添加一个自定义特性diy

那么testElm.getAttribute('diy')或者testElm.attributes[1]就是它的diy 特性，但是它并没有对应的diy 属性，同样情况的还有一些ARIA attribute 和table 中的colspan/rowspan。

ARIA指可访问性，用于给残障人士访问互联网提供便利

对于自定义属性，H5有一个data-* 的特性，例如

div id="test" data-diy="whatever">