От автора: в Angular много способов добавления, удаления и изменения классов. Мы можем выбрать отдельные классы и назначить свойство или воспользоваться замечательной директивой Angular 2 NgClass.
В этой статье мы поговорим о назначении классов, а также о Angular директиве NgClass, синтаксисе и лучших практиках.
Содержание
Назначение свойств с помощью className
Назначение свойств с помощью «class»
Angular директива NgClass
Несколько классов с помощью NgClass
Смешивание класса и NgClass
Очень часто в DOM требуется добавить некое «состояние», обычно через классы. Давайте разберем пару быстрый и легких вариантов с Angular.
Назначение свойств с помощью className
Прежде чем погрузиться в NgClass, давайте разберем синтаксический сахар, простой, но эффективный. При работе с отдельными классами я предпочитаю и рекомендую этот подход вместо NgClass. С ним быстрее работать, и он понятнее при анализе кода.
Как выглядит подход?
В JS DOM есть свойство className, доступное для DOM элементов:
|
1 2 3 |
const div = document.querySelector('div'); div.className = 'hello'; console.log(div.className); // 'hello' |
Красиво и легко. Однако в Angular мы работает с шаблонами и назначениями – не DOM API типа querySelector.
В Angular мы назначаем свойства, а не атрибуты. То есть мы можем изменить код на:
|
1 |
<div [className]="'active'"></div> |
Затем Angular выполнит поиск JS свойства className и создаст для него выражение. Слегка отойдя от темы, например, разберем интерполяцию:
|
1 |
<h1>{{ text }}</h1> |
Это синтаксический сахар:
|
1 |
<h1 [innerText]="text"></h1> |
Вернемся к классам. Возможно, нам нужно условие для className:
|
1 |
<div [className]="condition ? 'active' : 'inactive'"></div> |
Запомните, так сделать мы не можем:
|
1 2 |
<!-- if the condition is false, we will end up with class="false" --> <div [className]="condition && 'active'"></div> |
Нам нужно избежать этого и подставлять класс всегда, если нам нужно это поведение. А если класс один?
Назначение свойств с помощью «class»
В Angular есть сокращение для добавления класса, я его обожаю:
|
1 |
<div [class.active]="condition"></div> |
Когда condition возвращает true, добавляется класс active. Когда false, active удаляется. Красиво, чисто и лаконично.
А если использовать более сложные классы, например, БЭМ синтаксис (Блок-Элемент-Модификатор)?
|
1 |
<div [class.is-active]="condition"></div> |
Это все, что нужно. Хорошо, что нам не нужно подставлять is-active внутри строки, что обычно происходит, если в названии есть тире.
Пора разобрать NgClass, более гибкий подход, который я использую, когда мне нужно несколько классов.
Angular директива NgClass
NgClass стоит использовать, когда добавляется несколько классов. Базовый синтаксис NgClass:
|
1 |
string | string[] | Set<string> | { [klass: string]: any } |
Мы можем передавать строки, массивы строк, Set и объектные литералы. Нас интересуют только объектные литералы. Строки и массивы строк позволяют устанавливать классы, но не удалять их, так как они добавляются без условия:
|
1 2 |
<div [ngClass]="'active'"></div> <div [ngClass]="['active', 'open']"></div> |
Давайте разберем объектные литералы с NgClass:
|
1 2 3 4 |
<div [ngClass]="{ active: condition }"> </div> |
Как и в предыдущем примере с [class.active], тут делается то же самое. Но мы не можем сделать так:
|
1 2 3 4 5 |
<!-- errors --> <div [ngClass]="{ is-active: condition }"> </div> |
Почему? В объектные литералах нельзя задавать ключи с тире, не используя строковый синтаксис:
|
1 2 3 4 5 |
<!-- works --> <div [ngClass]="{ 'is-active': condition }"> </div> |
Если необходим более сложный CSS класс, используйте строку. Если нравится, то можете привести ключи к одному виду и всегда использовать строки, даже если они не нужны. Это может быть разумным выбором стилей в команде.
Несколько классов с помощью NgClass
Мы разобрали добавление и удаление определенных классов с помощью NgClass. Теперь давайте взглянем на более идеальное решение с несколькими классами.
Также стоит отметить, что condition, которое мы передаем, как значение ключа объектного литерала, будет выполняться. То есть можно использовать тернарный оператор или отрицание:
|
1 2 3 4 5 6 |
<div [ngClass]="{ 'is-active': condition, 'is-inactive': !condition, 'is-focused': condition && anotherCondition, }"> </div> |
Вот и все необходимые случаи использования по NgClass. Для удобства чтения рекомендую переносить условия на новую строку, как показано выше. Код легко анализировать, читать и оценивать, что происходит в коде.
Смешивание класса и NgClass
Код обязательно должен быть написан однообразно, поэтому выберите какой-то один подход и придерживайтесь его.
Вы/ваша команда можете предпочитать [class.foo] для большинства случаев и NgClass для более сложных сценариев. Или же вы захотите использовать просто NgClass – но правило остается – выбираем что-то одно, пишем однообразно и удобно.
Автор: Todd Motto
Источник: //toddmotto.com/
Редакция: Команда webformyself.
