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

我是一个绝对的初学者角2我有以下不相关的正确语法ngStyle指示。

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

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

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

style="background-color: green;"

在我的 HTML 段落中。

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

[ngStyle]="{backgroundColor: getColor()}"

and not

ngStyle="{backgroundColor: getColor()}"

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

它被称为属性绑定 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding。编译器尝试使用括号来计算表达式。没有它，您只是传递一个字符串。

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

{
    backgroundColor: getColor()
}

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

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

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