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

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

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

[] & {{}}

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

@Component({
    selector: 'my-here',template: `<br>2333333333333333{{here}}`
})
export class HereComponent {
    @Input() here: any;
    @Input() whichone: string;

    ngOnChanges(change){
        console.log(this.here)
        console.log(change)
    }
}

使用它

<my-here [herestr]="poo" [whichone]="'[]'"></my-here>
---------------------------
<my-here herestr="{{poo}}" [whichone]="'{}'"></my-here>

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

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

[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页面中；

<div id="test"></div>

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

<div id="test" diy="whatever"></div>

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

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

对于自定义属性，H5有一个data-* 的特性，例如
div id="test" data-diy="whatever"></div>
它的特性就是 testElm.getAttribute('diy')，而对应的属性则是 testElm.dataset.diy

ok，说回Angular，由于element没有这些属性，中括号[]的属性绑定语法自然不行，而且编译模板时会报错，所以对于非基本属性，Angular 提供了这种[attr.Attribute]="variable" 的特性绑定语法。

by the way，当property是基本属性时，使用[property]="variable"绑定属性，然后改变variable 的值，对应的attribute也会跟着属性同步，Angular应该是做了属性和特性的数据双向绑定的工作
所以只有property是基本属性，两者一样，例如[id]和[attr.id]的作用并无区别。

END and PS

道理我都懂，但为什么鸽子辣么大.....这有什么用呢，emmmmmm当然有，最常见的就是[property]="false"和property="{{false}}"的差异，后者其实绑定的是'false'，一旦做if语句就有问题。

综上所诉，属性绑定最好还是用中括号，双大括号用于展示，如<div>{{obj | json}}</div>，实际上，在渲染视图之前，Angular 把这些插值表达式翻译成相应的属性绑定。
还有就是，它依然可以用于执行Angular的模板语法，例如property="{{fun()}}"，property="{{a?b:c}}"，只是它会做多一步：把return的值转换成string。

说到attribute 和 property，记录个坑，Input标签的maxlength 特性对应的是maxLength 属性，即使特性写成大写maxLength 如下，浏览器解析出来的依然是<input maxlength="10" />

<input maxLength="10" />

所以写成[attr.maxlength]、[attr.maxLength]、[maxLength]都是可以，但是[maxlength]就不行，minlength/minLength一样。

Angular模板语法
 DOM 中 Property 和 Attribute 的区别

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

[] & {{}}

[attr.Attribute] 和 基本属性

END and PS

猜你在找的Angularjs相关文章

[attr.Attribute] 和基本属性