Почему директива 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>

Answer 2

Angular 2 имеет 3 типа директив:

1. Директивы атрибутов.
2. Структурные директивы.
3. Компоненты.

ngStyle является директивой атрибута. И все директивы атрибутов, которым мы должны передавать / присваивать значения, записаны в квадратных скобках. Например, встроенная директива NgStyle в руководстве "Синтаксис шаблона" может изменять несколько стилей элемента одновременно.