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

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

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

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

Содержание

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

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

Angular директива NgClass

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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

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

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

Angular директива NgClass

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Todd Motto

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree