角度属性绑定

Question

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

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

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

Answer 1

插值和属性绑定实际上是相同的，bind-sr​​c只是一种冗长且不常用的替代方法。

的区别：

插值将值“注入”到html中，因此当您说 value="{{ hello }}"Angular 在括号之间插入变量时。

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

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

两种方式（数据）绑定使您可以将事件与属性绑定结合在一起。例如

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

将允许您进行输入并同时显示值。在这里了解更多

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