为什么将ngStyle指令声明为[]？

Question

我是 Angular 2 的绝对初学者，我有以下dount与 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

它被称为property binding。使用括号，编译器会尝试计算表达式。没有它，你只是传递一个字符串。

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

{
    backgroundColor: getColor()
}

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

另一方面，在这里讨论主题，但如果你想在使用括号时传递一个字符串，你应该用单引号将它们包起来：

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

Answer 2

Angular 2有3种类型的指令：

1. 属性指令。
2. 结构指令。
3. 组件。

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