Классы Angular 2 и других версий с NgClass

От автора: в Angular много способов добавления, удаления и изменения классов. Мы можем выбрать отдельные классы и назначить свойство или воспользоваться замечательной директивой Angular 2 NgClass.

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

Содержание

Очень часто в DOM требуется добавить некое «состояние», обычно через классы. Давайте разберем пару быстрый и легких вариантов с Angular.

Назначение свойств с помощью className

Прежде чем погрузиться в NgClass, давайте разберем синтаксический сахар, простой, но эффективный. При работе с отдельными классами я предпочитаю и рекомендую этот подход вместо NgClass. С ним быстрее работать, и он понятнее при анализе кода.

Как выглядит подход?

В JS DOM есть свойство className, доступное для DOM элементов:

const div = document.querySelector('div');
div.className = 'hello';
console.log(div.className); // 'hello'

Красиво и легко. Однако в Angular мы работает с шаблонами и назначениями – не DOM API типа querySelector.

В Angular мы назначаем свойства, а не атрибуты. То есть мы можем изменить код на:

<div [className]="'active'"></div>

Затем Angular выполнит поиск JS свойства className и создаст для него выражение. Слегка отойдя от темы, например, разберем интерполяцию:

<h1>{{ text }}</h1>

Это синтаксический сахар:

<h1 [innerText]="text"></h1>

Вернемся к классам. Возможно, нам нужно условие для className:

<div [className]="condition ? 'active' : 'inactive'"></div>

Запомните, так сделать мы не можем:

<!-- if the condition is false, we will end up with class="false" -->
<div [className]="condition && 'active'"></div>

Нам нужно избежать этого и подставлять класс всегда, если нам нужно это поведение. А если класс один?

Назначение свойств с помощью «class»

В Angular есть сокращение для добавления класса, я его обожаю:

<div [class.active]="condition"></div>

Когда condition возвращает true, добавляется класс active. Когда false, active удаляется. Красиво, чисто и лаконично.

А если использовать более сложные классы, например, БЭМ синтаксис (Блок-Элемент-Модификатор)?

<div [class.is-active]="condition"></div>

Это все, что нужно. Хорошо, что нам не нужно подставлять is-active внутри строки, что обычно происходит, если в названии есть тире.

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

Angular директива NgClass

NgClass стоит использовать, когда добавляется несколько классов. Базовый синтаксис NgClass:

string | string[] | Set<string> | { [klass: string]: any }

Мы можем передавать строки, массивы строк, Set и объектные литералы. Нас интересуют только объектные литералы. Строки и массивы строк позволяют устанавливать классы, но не удалять их, так как они добавляются без условия:

<div [ngClass]="'active'"></div>
<div [ngClass]="['active', 'open']"></div>

Давайте разберем объектные литералы с NgClass:

<div [ngClass]="{ active: condition
}">
</div>

Как и в предыдущем примере с [class.active], тут делается то же самое. Но мы не можем сделать так:

<!-- errors -->
<div [ngClass]="{ is-active: condition
}">
</div>

Почему? В объектные литералах нельзя задавать ключи с тире, не используя строковый синтаксис:

<!-- works -->
<div [ngClass]="{ 'is-active': condition
}">
</div>

Если необходим более сложный CSS класс, используйте строку. Если нравится, то можете привести ключи к одному виду и всегда использовать строки, даже если они не нужны. Это может быть разумным выбором стилей в команде.

Несколько классов с помощью NgClass

Мы разобрали добавление и удаление определенных классов с помощью NgClass. Теперь давайте взглянем на более идеальное решение с несколькими классами.

Также стоит отметить, что condition, которое мы передаем, как значение ключа объектного литерала, будет выполняться. То есть можно использовать тернарный оператор или отрицание:

<div [ngClass]="{ 'is-active': condition, 'is-inactive': !condition, 'is-focused': condition && anotherCondition,
}">
</div>

Вот и все необходимые случаи использования по NgClass. Для удобства чтения рекомендую переносить условия на новую строку, как показано выше. Код легко анализировать, читать и оценивать, что происходит в коде.

Смешивание класса и NgClass

Код обязательно должен быть написан однообразно, поэтому выберите какой-то один подход и придерживайтесь его.

Вы/ваша команда можете предпочитать [class.foo] для большинства случаев и NgClass для более сложных сценариев. Или же вы захотите использовать просто NgClass – но правило остается – выбираем что-то одно, пишем однообразно и удобно.

Автор: Todd Motto

Источник: https://toddmotto.com/

Редакция: Команда webformyself.