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

Question

我很困惑这两种数据绑定方式之间的差异。

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

在我的HTML我结合这个属性在输入值属性：<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"语法糖&第一个小的详细。

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

属性绑定含义属性名称包装与[] &任何价值的财产binding指定被评估对当前组件上下文（this）。

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