角度属性绑定[重复]

Posted 2023-02-23

【中文标题】角度属性绑定[重复]

【英文标题】：Angular property binding [duplicate]

【发布时间】：2018-03-04 05:59:16

【问题描述】：

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

<img src=" myProperty ">
<img bind-src="myProperty ">
<img [src]="myProperty">

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

【问题讨论】：

很多答案可以在这里找到angular.io/guide/template-syntax#binding-syntax-an-overview

【参考方案1】：

Interpolation 和 Property binding 几乎是一样的，bind-sr​​c 只是另一种方式，冗长而不常用。

区别：

interpolation 将值“注入”到 html 中，所以当你说 value=" hello "Angular 正在插入你的变量在括号之间。

属性绑定 允许 Angular 直接访问 html 中的元素属性。这是更深层次的访问。当您说[value]="hello" Angular 正在获取元素的 value 属性，并将您的变量设置作为该属性的值。

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

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

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

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

最后何时使用插值以及何时使用数据绑定。这通常是一种形式，通常在使用智能组件和哑（演示）组件时，由于可读性，您将使用属性绑定绑定到 html，并且因为我应该说，绑定到属性“更安全”那个案子。如果您有简单的值，那么插值可能是您的朋友。这一切都取决于可读性、最佳实践和偏好。

【参考方案2】：

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

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

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

的另一个原因

其他两个是相同的。社区似乎更喜欢，但这是一种偏好。

【参考方案3】：

见property binding

和binding or interpolation

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

将数据值呈现为字符串时，没有技术原因 喜欢一种形式而不是另一种形式。你倾向于可读性，这往往 支持插值。你建议建立编码风格规则 并选择既符合规则又最有感觉的形式 很适合手头的任务。

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