为什么ngStyle指令被宣布为[]？(Why the ngStyle directive is d

我是一个绝对的初学者与角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>

Answer 2:

角2具有3种类型的指令：

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

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

文章来源: Why the ngStyle directive is declared into the []?