为啥将 ngStyle 指令声明到 [] 中？

Posted 2023-02-22

【中文标题】为啥将 ngStyle 指令声明到 [] 中？

【英文标题】：Why the ngStyle directive is declared into the []?为什么将 ngStyle 指令声明到 [] 中？

【发布时间】：2017-11-11 07:15:25

【问题描述】：

我是 Angular 2 的绝对初学者，我对 ngStyle 指令的正确语法有以下疑问。

我有这个例子（效果很好）：

<p [ngStyle]="backgroundColor: getColor()">Server with ID  serverID  is  getServerStatus() </p>

我知道，在这种情况下，ngStyle 指令正在添加类似以下内容：

style="background-color: green;"

在我的 html 段落中。

我的疑问与此语法的正确含义有关。为什么会这样：

[ngStyle]="backgroundColor: getColor()"

而不是

ngStyle="backgroundColor: getColor()"

为什么会进入[...]？究竟是什么意思？

【问题讨论】：

为简单起见：当您使用[directive]="..." 时，它将数据发送到指令。当您使用(directive)="..." 时，该指令向您发送数据。 ngStyle 是一个内置指令，如果你查看documentation，你可以看到它做了什么

【参考方案1】：

Angular 2 有 3 种类型的指令：

属性指令。 结构性指令。 组件。

ngStyle 是一个属性指令。我们需要传递/分配值的所有属性指令都写在方括号内。 例如，模板语法指南中内置的 NgStyle 指令可以同时更改多个元素样式。

【参考方案2】：

它叫做property binding。使用括号，编译器会尝试评估表达式。没有它，你只是传递一个字符串。

因此，使用括号，您将传递一个 javascript 对象：

    backgroundColor: getColor()

编译器将从组件中调用getColor() 方法以获取正确的颜色。

另一方面，这里离题了，但是如果你想在使用括号时传递一个字符串，你应该用单引号括起来：

<div [property]="'hiii'"></div>

【讨论】：

+1 表示最后一点。如果您不将字符串像“'hill'”这样包装并将其写为“hill”，那么 Angular 将尝试查找变量 hill 而不是将其视为值。