Angular 将状态绑定到属性的[]和{{}之间的差异？

以下是一个模板示例：

<span count="{{currentCount}}"></span>
<span [count]="currentCount"></span>

---

在这里，他们都做同样的事情。首选哪一个以及原因？

[]

用于从父组件中的值绑定到子组件中的

@Input（）

。它允许传递对象

{{}

用于绑定属性和类似HTML的字符串

<div somePropOrAttr="{{xxx}}">abc {{xxx}} yz</div>

有关字符串插值和属性绑定之间的区别的详细信息，请参见

： 理解它的主要内容如下：

插值是将角度转换为属性的特殊语法 结合它是属性绑定的一种方便的替代方法

这意味着在引擎盖下它会产生类似的结果。然而，字符串插值有一个重要的限制。这意味着将首先计算字符串插值中的所有内容（尝试从模型ts文件中查找值）：

• 如果在那里找不到该值，则字符串插值中的值将计算为字符串
• 如果在模型中找到此值，则找到的值将强制转换为字符串并使用

这对如何使用这两种方法有一定的影响。例如：

带字符串插值的字符串连接：

  <img src=' https://angular.io/{{imagePath}}'/>

字符串插值只能用于字符串

  <myComponent  [myInput]="myObject"></myComponent>

---

当

myInput

是

myComponent

的

@Input（）

并且我们想要传入一个对象时，我们必须使用属性绑定。如果我们使用字符串插值，对象将变成一个字符串，这将作为

myInput

的值传入，我在战斗结束后会晚一点：），但是，据我所知，还有另一个差异有时可能非常重要。 顾名思义，“属性绑定”意味着您绑定到HTML元素“object”（对应于DOM中的“objective”表示形式）的属性，wihch与字符串插值不同，后者可应用于HTML元素标记属性，这就是为什么在与未解析/可解析的实体对话时，只能在其中放入字符串的原因

通常，两者之间存在直接的对应关系（html中的标记有一个foo属性，该属性链接到DOM对象的foo属性），但这不是一个规则，您可以拥有不链接到属性的属性以及相反的属性

---

顺便说一下，在堆栈溢出中有一个非常好的答案，它深刻地解释了两者之间的区别：

我想要[]和{{}之间的区别，而不是[]和（）。

  <myComponent  [myInput]="myObject"></myComponent>