角度属性绑定[重复]答案

【问题标题】：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

标签： angular data-binding

【解决方案1】：

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

区别：

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

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

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

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

【讨论】：