角度属性绑定

Question

Angular有不同的数据绑定属性方法：

If..End If

是否有正确的方法将组件属性绑定到视图？这三种方式有什么区别，我何时以及为什么要使用每种方式？

Answer 1

插值和属性绑定几乎相同，而bind-sr​​c只是一种冗长且不经常使用的替代方式。

差异：

插值＆＃34;注入＆＃34;将值放入html中，所以当你说 value="{{ hello }}" Angular 在括号中插入变量。

属性绑定允许Angular直接访问html中的elements属性。这是一个更深入的访问。当你说[value]="hello" Angular正在抓取元素的value属性，将你的变量设置为该属性的值。

事件绑定允许您使用诸如单击之类的事件来触发功能。这些绑定使用括号，例如(click)="myFunction($event)"。这将调用.ts文件中定义的myFunction（）方法。围绕＆＃39;（点击）＆＃39;的括号将函数绑定到dom事件。$event是将事件对象传递给函数的关键字。你也可以传递带单引号的字符串，甚至是带插值的变量。

双向（数据）绑定允许您将事件与属性绑定结合使用。例如

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

将允许您输入并同时显示该值。了解更多here

最后何时使用插值以及何时使用数据绑定。这通常是一种形式，通常在使用智能组件和哑（演示）组件时，由于可读性，您将使用属性绑定绑定到html，因为我会说，＆＃34;更安全＆＃34;在这种情况下绑定到属性。如果你有简单的值，那么插值可能是你的朋友。这一切都归结为可读性，最佳实践和偏好。

Answer 2

请参阅property binding

和binding or interpolation

  

在很多情况下，插值是一种方便的属性绑定替代方法。

     

将数据值渲染为字符串时，没有技术理由   喜欢一种形式到另一种形式。你倾向于倾向于可读性   赞成插值。您建议建立编码样式规则   并选择既符合规则又感觉最多的形式   对于手头的任务很自然。

     

将元素属性设置为非字符串数据值时，必须使用   使用属性绑定。

Answer 3

它们非常相似，单向数据绑定。

我认为src =“{{myProperty}}”略有不同，因为它总是会呈现一个字符串，所以如果你需要一个int或boolean，它可能无法正常工作。

我知道在angularjs中，这种类型的语法绑定可能会导致与旧版本IE的兼容性问题。我不确定这些是否已在Angular 2+中得到解决，但这是我可以避免使用src =“{{myProperty}}”

的另一个原因

另外两个是相同的。社区似乎更喜欢，但它是一种偏好。