为什么 ngStyle 指令被声明到 [] 中？

Question

我是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()}"

为什么它会进入[...]？它到底意味着什么？

Answer 1

这称为属性绑定。编译器尝试使用括号来计算表达式。没有它，您只是传递一个字符串。

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

{
    backgroundColor: getColor()
}

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

另一方面，这里偏离了主题，但如果您想在使用括号时传递字符串，则应该将它们用单引号引起来：

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