В чем разница между [style] и [ngStyle] в Angular?

Когда вам нужно применить динамические стили к элементу HTML с помощью Angular, есть разные варианты, которые следует учитывать.

Первое и наиболее очевидное решение - использовать обычные атрибуты HTML style или class вместе с привязками данных Angular, что выглядит следующим образом:

<div [style.color]="errorMessageColor">
   The phone number you entered does not match the expected format
</div>

Приведенный выше код будет стилизовать div с использованием значения цвета, установленного в свойстве errorMessageColor вашего компонента. Благодаря привязке данных всякий раз, когда это свойство изменяется, div будет получать новый цвет.

Вы можете сделать приведенный выше пример еще более мощным, используя тернарный оператор в своем выражении для выражения условного стиля:

<div [style.color]="hasError ? 'red' : 'black' ">
   The phone number you entered does not match the expected format
</div>

В приведенном выше примере предполагается, что hasError может оцениваться как true, что удобно, поскольку в Javascript все, что не является null или undefined, будет работать. В результате, если hasError не является null, undefined или false, сообщение будет отображаться красным цветом, в противном случае оно будет черным.

Это здорово, но может стать довольно подробным, если вы хотите применить несколько стилей к одному и тому же элементу:

<div [style.color]="hasError ? 'red' : 'black' " [style.font]="font"       [style.background-color]="hasError ? 'tomato' : 'white' ">
   The phone number you entered does not match the expected format
</div>

В этом случае использование класса CSS - гораздо лучший вариант, поскольку вы можете реорганизовать эти свойства CSS в одном месте и, возможно, повторно использовать их в других элементах HTML.

Однако иногда вам могут понадобиться очень специфические свойства CSS, основанные на разных условиях. Вот где в игру вступает ngStyle. С ngStyle вы можете выполнить привязку к объекту, который выражает столько условий и случаев, сколько вам нужно:

<div [ngStyle]="currentStyles">
   The phone number you entered does not match the expected format 
</div>

А затем в коде вашего компонента:

this.currentStyles = {     
       'font-style':  this.canSave  ? 'italic' : 'normal',  
       'color':       this.hasError ? 'red'   : 'black',     
       'font-size':   this.hasError ? '24px'   : '12px'   
};

Теперь вы можете выразить столько разных стилей, сколько нужно. ngStyle - это директива Angular, которая дает вам гибкость для этого, тогда как style - это обычное свойство HTML, к которому вы можете связывать значения только одно за другим. В этом разница между ними двумя.

Обратите внимание, что такое же различие в поведении применяется между class и ngClass, где первое предназначено для использования для одиночных привязок, а второе может использоваться для привязки к объекту решения, аналогичному показанному выше для ngStyle.

Меня зовут Ален Шотар. Я являюсь консультантом-основателем и тренером в Angular Training, где я помогаю командам веб-разработчиков изучать и свободно владеть Angular. Посетите нас @AngularTraining!

Если вам понравилась эта статья, порекомендуйте и поделитесь ею! Спасибо за ваше время.