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

john_d_lk
当我们查看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 的区别
阅读 12.9k

小大陆
分享与记录
33 声望
1 粉丝
0 条评论
33 声望
1 粉丝
文章目录
宣传栏