Angular2中设置动态id的三种方法区别及最优方案选择

三者核心区别 #

• [id]="item.id"
  属于Angular的DOM属性（Property）绑定，直接操作DOM对象内置的id属性，没有额外的DOM Attribute操作开销，性能最高。绑定的item.id会自动转为字符串类型赋值给DOM的id属性，如果值为undefined/null，最终id会被设为对应值的字符串形式"undefined"/"null"。

• [attr.id]="item.id"
  属于HTML Attribute绑定，直接修改HTML标签上的id属性值，需要走DOM Attribute的映射逻辑，性能比Property绑定低。通常仅用于绑定DOM没有内置对应Property的自定义属性，对于id这类原生标准属性属于冗余写法。如果绑定值为undefined/null，Angular会直接把id属性从HTML标签上移除。

• id={{item.id}}
  属于插值表达式写法，Angular编译阶段会直接将其转换为和[id]="item.id"完全等价的Property绑定，运行逻辑、性能表现和第一种写法没有任何差异，仅写法更贴近原生HTML的书写习惯，可读性对新手更友好。

最优选择 #

绝大多数场景下优先选择[id]="item.id"或者id={{item.id}}即可，两者性能一致，具体用哪种可根据团队代码规范偏好决定。

仅当你有「绑定值为空时需要移除整个id属性」的特殊需求时，才需要选择[attr.id]="item.id"写法。

内容的提问来源于stack exchange，提问作者antek16x