angular - 属性绑定(bind)与属性插值

Question

我读过一篇关于属性和特性绑定(bind)之间区别的文章。据我了解，大多数时候，Angular2 更喜欢属性绑定(bind)， 因为每次数据更改后，DOM 都会更新。 (如果我说错了，请指正)。

我有一个自定义组件并从父组件使用它。在其中，我有一个名为 truevalue 的 @Input。当我通过属性绑定(bind)从父级启动 truevalue 时，有时它不会改变。我使用了以下代码:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox>

如果我将 true 或 "1" 发送到 trueValue 它有效，但如果我发送 "Y" 或 "YES"，它不起作用。所以我被迫使用属性绑定(bind)。我不知道是什么问题。

我已将其更改为以下内容:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" trueValue="Y"></my-checkbox>

提前致谢

Answer 1

像属性绑定(bind)

[trueValue]="..."

计算表达式 "..." 并赋值

"true" 的计算结果为 true “Y” 未知。 TypeScript 中没有内部的Y 值，组件类实例中也没有属性，这是模板绑定(bind)的范围。 在这种情况下你会想要

[trueValue]="'Y'"

注意使 Y 成为字符串的附加引号。

普通属性也被分配给输入

trueValue="Y"

是没有任何 Angular2 绑定(bind)的纯 HTML，属性值始终是字符串。因此，这将分配字符串 Y。

另一种方式是字符串插值

trueValue="{{true}}"

将分配值 "true"(作为字符串)，因为带有 {{...}} 的表达式将被评估，然后在传递之前转换为字符串到输入。 这不能用于绑定(bind)字符串以外的其他值。

要显式绑定(bind)到属性而不是属性，您可以使用 (除了创建属性但不进行任何评估的 trueValue="Y")

[attr.trueValue]="'Y'"

或

attr.trueValue="{{'Y'}}"

如果您想使用 trueValue 属性通过 CSS 选择器寻址元素，则属性绑定(bind)很有用。