属性值绑定：方括号 vs 大括号

Posted 2023-02-23

【中文标题】属性值绑定：方括号 vs 大括号

【英文标题】：Attribute value binding: square brackets vs curly brackets

【发布时间】：2018-11-16 23:56:16

【问题描述】：

我已经下载了适用于 Node 的 Angular CLI 6.0.7 并且正在使用它，按照教程等尽可能多地学习。

我有一个问题是数据绑定。似乎如果我想将组件成员变量的值（比如title）绑定到输入值，我有两个选择：双花括号或方括号。这两种形式：

<input [value]="title" type="text" />

<input value="title" type="text" />

这两种方法有什么区别，还是只是风格偏好？如果存在功能差异，在哪些情况下首选哪一个？

提前致谢！

编辑我知道大括号表示字符串插值，产生一个字符串，而方括号表示属性绑定，可以使用任何数据类型。但我不明白的是，这两件事何时在功能上有所不同？你什么时候会有一个 DOM 元素的属性包含一个与其字符串化版本不等价的值，你将如何正确访问这样一个属性的值？

【问题讨论】：

Property binding vs attribute interpolation的可能重复

我认为这是一个重要的问题。令我惊讶的是 Angular 文档对这个主题并不清楚。

【参考方案1】：

它们可能看起来相同，但 会将输入转换为字符串。但是如果要输入数字或对象，则必须使用[ ]。

我为同一个 here 添加了一个 stackblitz 表示

【讨论】：

好的，我知道在使用自定义组件的属性时它有多么重要。但是，当绑定到标准 html DOM 元素的属性时，区别是否重要？我的印象是 HTML 对其属性使用松散的相等性检查？

你就在那里。它使用松散的相等检查。除非您不使用这些属性来修改使用严格相等检查的 ts 中的业务逻辑，否则您应该没问题！希望有帮助！

【参考方案2】：

它们实际上是相同的。您正在从组件到视图的单向绑定。但是，在某些情况下，您必须使用其中的一种。

例如，如果要实现字符串连接，则必须使用插值（例如， ）。

<img src='baseUrl/path'/>

您无法使用属性绑定实现上述目标。

另一方面，当你想将非字符串值绑定到 HTML 元素时，你必须使用属性绑定（例如，[]）

<button [disabled]='isDisabled'> My Button </button>

【讨论】：

这是我不理解的第二部分。如果我要使用disabled='isDisabled'，为什么它不能正常工作？字符串 "true" 和 "1" 不都等于布尔值 true 吗？

检查答案@IceMetalPunk。它们不起作用，因为它们属于 STRING 类型，而不是数字或布尔值。

@IceMetalPunk 我的看法是——HTML元素的属性和DOM属性是两个独立的概念，当你禁用='isDisabled'时，你试图绑定到HTML元素的属性，在这种情况下，按钮元素的禁用属性。事实上，HTML 元素属性实际上是一次性的，一旦 DOM 准备好就会消失。它们对于初始化 DOM 属性很有用。根据我的理解，按钮元素的 disabled 属性的值设置为浏览器标准以外的值可能不会被浏览器理解。

您可以使用属性绑定轻松地进行字符串连接：<img [src]="'baseUrl/' + path"/>...

@mmey 同意，所以从技术上讲，这个答案是不正确的。

【参考方案3】：

- 插值： 它允许您合并表达式。 Angular 对双花括号中的所有表达式求值，并将表达式结果转换为字符串。

 <p> 1+1 </p>

大括号之间的文字也可以是组件属性

 <p> name </p>

[] - 属性绑定： 这是一种单向绑定，因为值从组件传递到模板。它允许您设置视图元素的属性。您可以更新组件中属性的值，然后将其绑定到视图模板中的元素。属性绑定使用 [] 语法进行数据绑定。

<button [disabled]="isDisabled"></button>