Question

我对这两种数据绑定方式的区别感到困惑。

在我的组件中，我有属性：stringInterpolation = This is string interpolation;

在我的html中，我将该属性绑定到输入中的value属性：<input type="text" value="{{stringInterpolation}}">

我已经读过我也可以用另一种方式绑定属性：<input type="text" [value]="stringInterpolation">在文本框中输出相同的值。

以下是两个输入的开发工具的检查：

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

和

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

他们都是一样的。

我的问题是：value="{{stringInterpolation}}与[value]="stringInterpolation"有什么不同？

Answer 1

它们是评估财产价值的另一种方式

value={{stringInterpolation}}

上面将评估{{}}插值并在DOM的value属性中添加该值。

[value]="stringInterpolation"语法糖和＆amp;第一个的冗长。

在Angular 2中，它被称为属性绑定。通常，它倾向于在组件到组件通信目的中使用。有时用于将动态值设置为DOM属性。

属性绑定含义属性名称换行[]＆amp;属性binding中指定的任何值都会根据当前组件上下文（this）进行评估。

除了在页面上绘制组件HTML时，angular在每个DOM节点_ngcontent-[someunique]-[somenumber]=""上添加了动态类，如果为组件添加了任何CSS，则会对CSS规则应用同样的事情。这两个附加属性已添加到两个位置（CSS＆amp;和节点），以确保组件CSS只应对当前加载的组件产生影响（取决于您在组件元数据中设置的ViewEncapsulation）。

Angular2：从组件内的属性绑定属性

1 个答案: