代码之家 › 专栏 › 技术社区 › vinibrsl

角度特性绑定[重复]

data-binding angular

11

vinibrsl · 技术社区 · 8 年前

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

是否有正确的方法将组件属性绑定到视图?这三种方法之间有什么区别,何时以及为什么我应该使用每种方法?

3 回复 | 直到 8 年前

1

20

FussinHussin 8 年前

这个差别 :

插值 value="{{ hello }}" 角度是 正在插入

属性绑定 允许Angular直接访问html中的elements属性。这是一个更深入的途径。当你说 [value]="hello" Angular正在获取元素的value属性,并且背景变量作为该属性的值。

事件绑定 允许您使用事件,例如点击触发功能。例如,这些绑定使用括号 (click)="myFunction($event)" $event 是将事件对象传递给函数的关键字。您还可以传递带有单引号的字符串,甚至可以传递带有插值的变量。

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

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

将允许您进行输入,同时显示值。了解更多信息 here

何时使用插值和何时使用数据绑定。这通常是一种形式,通常在使用智能组件和哑(表示)组件时,由于可读性,您会使用属性绑定绑定到html,因为在这种情况下绑定到属性“更安全”。如果你有简单的值,那么插值可能是你的朋友。这一切都归结于可读性、最佳实践和偏好。

2

1

Moema 8 年前

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

当将数据值呈现为字符串时,没有技术原因喜欢一种形式而不是另一种形式。你倾向于可读性,这往往选择既符合规则又感觉最舒服的形式对于手头的任务来说很自然。

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

3

1

bgraham 8 年前

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

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

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