angular6 中的 property-binding 和 attribute-binding

时间 2019-11-07

标签 angular6 angular property binding attribute 栏目 AngularJS 繁體版

原文原文链接

1.前言

前几天，angular 项目里实现属性绑定的时候发现了个小问题，这是个人代码：javascript

<input type="checkbox" [attr.checked]="item.data.isEnabled">html

但代码并无生效。而后查了 angular 文档里的属性绑定，文档是这样说的：java

HTML attribute vs. DOM property The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.- Attributes are defined by HTML.数组

Properties are defined by the DOM (Document Object Model).

A few HTML attributes have 1:1 mapping to properties. id is one example.

Some HTML attributes don't have corresponding properties. colspan is one example.

Some DOM properties don't have corresponding attributes. textContent is one example.

Many HTML attributes appear to map to properties ... but not in the way you might think!That last category is confusing until you grasp this general rule: Attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.The HTML attribute and the DOM property are not the same thing, even when they have the same name.app

上面那段话翻译过来以下：ide

Attributes 是由 html 定义的，而 Properties 是由文档对象模型（DOM）定义的。
少许 html attributes 在 properties 里造成 1:1 的映射关系，好比id;
一些 properties 没有相应的 attributes，好比 td 中的 colspan, properties里面就没有 colspan;
一些 attributes 没有相应的 properties，好比 textContent，attribute 就没有textContent;

property 的值是能够改变的，attribute 是不能够改变的，HTML attribute 和 DOM property 虽然名字类似，可是不同的东西。如今，我以项目中的那句代码为例进行简单分析。this

2.代码示例

index.html:spa

<body>
 <div class="switch">
        <input type="checkbox" id="switchButton" name="switchButton" value="11" sth="whatevert">
        <label class="slider round" for="switchButton"></label>
 </div>
</body>
<script>
var attr = document.getElementById('switchButton');
    console.log(attr);
    console.log(attr.attributes)
</script>

其中执行 console.log(attr);打印出来的就是 property的内容：翻译

从图中能够看到 DOM propertites 是对象数组，其中 checked:false 属于 DOM properties 中的其中一项，而 attributes 是 properties 的一个名为 NamedNodeMap 的子集，它的内容为：code

能够看到这个子集不是一个严格意义上的子集，由于 attributes 中的 sth="whatevert" 属性，在 properties 上并无。执行下面代码：

console.log(attr.sth);//underfined
console.log(attr.attributes.sth);//sth="whatevert"

3.总结

要实现 input 元素中 checked 属性的绑定，应该是 [checked]="item.data.isEnabled"。当要实现某些 property 里没有，在attribute 里的属性时，应该用 [attr. ]="" 的绑定语法。
在 angular 里一般是用 properties-binding 就能够实现属性绑定，某些特殊状况下才须要 attribute-binding。
HTML attibute 明确了属性的初始值，而 DOM property 的属性的值是当前的值。
最重要的一点：angular 里说的模板绑定是指 property-dinding 和事件绑定，不包括 attribute-binding。