JavaScript для начинающих: Назначение динамических классов с помощью ngClass

В веб-приложениях часто требуется настраивать внешний вид элемента в зависимости от условия. Существует несколько способов достижения этой цели, но если вы работаете с Angular, ваш выбор очевиден. Директива ngClass предоставляет множество способов динамического назначения имен классов элементам или компонентам. Ее синтаксис является кратким, но в то же время поддерживает довольно сложную логику, что позволяет нам тонко управлять как нашими именами классов, так и критериями для их установки. В этом руководстве мы рассмотрим некоторые из наиболее распространенных способов динамического назначения CSS-класса элементу с использованием директивы ngClass.

Назначение CSS-класса с использованием привязки свойства [className]

Хотя это руководство посвящено директиве ngClass, стоит отметить, что во многих случаях вам она даже не понадобится! Благодаря привязке свойства [className] мы можем устанавливать класс через стандартное свойство JavaScript className, используя синтаксис привязки []. Мы можем выполнить любое выражение внутри этой привязки, которое возвращает строку. Это позволяет нам устанавливать один или несколько классов в зависимости от условия:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

Мы также можем собирать имя класса во время выполнения:

<div [className]="'class' + someValue"></div>

Читать: 5 концепций JavaScript, которые должен знать каждый веб-разработчик

Переключение класса через привязку свойства [className]

Некоторые считают, что техника переключения классов выше является немного более сложной, чем необходимо, поскольку inactive-class вероятно будет по умолчанию. Если вы относитесь к этому лагерю, вы можете использовать синтаксис [class.class-name] для передачи условия к оценке:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

Итак, если мы можем условно установить класс, используя привязку свойств [className], зачем нам вообще нужна директива ngClass? Как мы увидим, настоящая причина использования директивы ngClass заключается в том, что она может помочь нам выбрать между несколькими классами.

Глубокий анализ директивы ngClass

Прежде чем мы рассмотрим, как использовать директиву ngClass, было бы полезно посмотреть на ее определение:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

Рассматривая вышеуказанный код, мы теперь видим, что синтаксис [class] , использованный ранее, фактически является частью директивы ngClass, через @Input('class'). Также обратите внимание, что директива ngClass дает нам не менее четырех вариантов установки динамических классов! 

Давайте рассмотрим каждый из них более подробно.

Подача строки или строк[]

Присваивание строки или массива строк к ngClass позволяет нам привязывать динамические классы к переменным Angular. Предположим, что у нас есть переменная с именем activeClass. Внутри нашего .ts файла мы можем установить известное имя класса, такое как "text-success" или "text-failure", в зависимости от результата какой-либо операции:

<div 
  [ngClass]="activeClass">
</div>

Синтаксис массива полезен для применения нескольких классов к одному и тому же элементу или компоненту:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

Использование оцениваемого выражения

Немного более продвинутый – но очень полезный – метод использования ngClass – предоставить выражение. Предоставленный класс применяется только в том случае, если переменная или выражение оценивается как true. Чтобы предоставить выражение, необходимо предоставить объект, используя фигурные скобки {}. Слева от каждого двоеточия – имя свойства – это класс, который будет применен; справа – значение свойства – это выражение или переменная, которую вы хотите оценить. Вот пример:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

Читать: React, Angular и Vue.js: В чем техническое различие?

Использование тернарного оператора

Тернарный оператор позволяет присвоить значение переменной на основе булевого выражения – либо булевого поля, либо оператора, который оценивается как логический результат. В своей самой базовой форме тернарный оператор, также известный как условный оператор, может использоваться в качестве альтернативы оператору if/then/else при установке переменной.

Предоставление тернарного оператора для ngClass позволяет нам указать два разных класса: один, если выражение истинно, и другой – ложный. Вот базовый синтаксис для тернарного оператора:

[ngClass]="expression or variable ? true class : false class"

Вот некоторый код, который использует тернарный оператор для установки класса DIV в зависимости от того, равны ли две переменные:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

Подпись Set ngClass: Нежеланный и нелюбимый

Set – это новая структура данных, представленная в ES6, аналогичная Map. В типизированном Set на TypeScript позволяет нам хранить уникальные значения в списке, используя методы такие как add(), has() и delete(). По какой-то причине подпись ngClass типа Set так и не стала популярной. Я никогда не использовал её, и не знаю никого, кто бы это делал.

Но, стоит сказать, что в Set должны содержаться строки, представляющие имена классов для применения к элементу или компоненту. Вот некоторый TypeScript код, который создаёт Set с именем classes:

// Объявление переменной класса
public classes = new Set();
 
// Добавление имен классов
classes.add('active').add('text-large');

Заключение

В этом уроке мы рассмотрели некоторые из наиболее распространенных способов динамического присвоения CSS класса элементу с использованием директивы ngClass. Как видите, это довольно мощный инструмент.