Атрибутивные директивы NgClass и NgStyle в Angular 2+

Глоссарий терминов:
Angular 2 — фреймворк от медиагиганта Google для создания клиентских приложений. Эта библиотека в основном нацелена на разработку SPA-проектов. В этом плане Angular 2 является наследником другой библиотеки AngularJS.
Angular-CLI — Angular-Command Line Interface — командная строка для обслуживания Angular.
SPA — (Single Page Application) одностраничное приложение.
Javascript – язык программирования, с помощью которого веб-страницам придается интерактивность и прочие плюшки, дополняющие возможности HTML/CSS.
Директива — набор инструкций, которые используются при постройке HTML кода, это класс, который состоит из директивных метаданных.

Angular 2 это принципиально новый фреймворк, который вобрал в себя множество функциональных нововведений.  
*В этом посте упоминание термина “Angular”  или “Angular 2” будет означать версию Angular выше 2.х., если не будет указано иное.

Создание динамических стилей отображения для веб приложений может стать головной болью.
Но к счастью, именно библиотека Angular 2 призвана облегчить  создание динамической стилизации наших приложений.

Что мы будем настраивать?

Как обычно, посмотрим на часть функций, которые мы собираемся реализовать используя директивы динамического отображения ngStyle и ngClass.

Стилизация элементов без Angular 2

Прежде всего, посмотрим как мы изменяем классы class и стили style элемента в чистом JavaScript: для этого нам понадобится создать небольшой div, как представлено ниже:

И вот, чтобы изменить стиль нашего div используя чистый JavaScript, нам нужно прописать это:

Если мы посмотрим на код, представленный выше, можно заметить, что сначала нам потребуется получить элемент  по id, потом определить имя для его класса перед тем как начать изменять значения, и.т.д. Также уточним, что в некоторых случаях нам нужно будет связаться со свойством свойства, к примеру divToChange.style.background-color , перед тем, как начать назначать им значения.

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

Функциональность же Angular 2 делает много частей разработки значительно легче, включая и стилизацию. Теперь, давайте посмотрим, как с этим заданием справиться Angular 2.
Прежде всего, мануал предполагает, что вы знаете что такое Angular 2 и как использовать Angular-CLI.

Начнем с Angular CLI

В случае, когда у вас не установлен Angular CLI, вы можете запустить следующую команду:

Когда Angular CLI установлен, давайте создадим новый проект:

Команда представленная сверху создает новый проект с именем «angular-class-style»

После того, как проект создан, мы меняем директорию на наш angular проект на «angular-class-style» и запускаем ng serve.

Мы должны увидеть следующее:

Начнем работу с директивами стиля с Angular 2

Теперь начнем с задачи стилей:
В Angular 2 есть два метода назначения стилей элементам.

1. Использование связки [style.property]

Для начала, мы можем связать к примеру цвет
 [style.color]=’red’

Этот метод назначения стилей делает цвет элемента красного цвета. Проще говоря, мы также можем изменять любой стиль элемента таким же образом передавая строку как значение. К тому же, чтобы элементу стать более динамическим, мы можем передать динамический стиль используя переменную, которая существует в компоненте.

Давайте и возьмем  последнее предложение выше за пример.  Откроем ваш файл src/app/app.component.ts, и заменим его следующим контентом:

То, что мы проделали очень просто. Мы настроили свойство RandomColor как переменную, что управляет цветом фона, и  назначили  свойству значение нашей функции генерации случайного цвета. Следующим шагом мы определили функцию генерации случайного цвета, которая в случайном порядке генерирует цвета перемешивая символы (цифры и буквы) и удостоверились, что она возвращает нам цвет в формате типа  #ffffff

Потом мы определили функцию установки цвета setColor которая устанавливает переменную  случайно сгенерированному цвету.

После всего, мы должны обновить наш файл src/app/app.component.html к следующей структуре:

Выше мы определили HTML структуру нашего компонента, которая состоит из 4 главных элементов на куске этого кода. Первый выдает свойство свойства, второй, элемент заголовка,  определяет что мы будем внедрять. Третий, это div, к которому мы прикрепили связь со стилем. Четвертый – кнопка, которая имеет функцию клика setColor из нашего компонента.

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

2. Использование связки стиля через [ngStyle]

Другой метод использования стиля это использование свойства [ngStyle] напрямую, который позволяет нам передавать объекты в него для обработки.
Для примера код [ngStyle]=»{‘color’:’white’, ‘font-size’:’17px’}»  , который также позволит нам установить динамические стили. Посмотрим на следующий пример, приведите ваш файл src/app/app.component.ts к такому виду:

Теперь посмотрим, что же изменилось:
Мы добавили два свойства к нашему файлу приложения app.component.ts: font_size и background_color. Эти два свойства ответственны за динамическое изменение стиля.

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

Теперь изменим наш файл src/app/app.component.html к такому виду:

Давайте подробнее разберем, что мы добавили в нашу HTML структуру:

Мы добавили дополнительные элементы на страницу: новый тэг заголовка, чтобы определить что мы внедряем, новый div с привязкой стиля через ngStyle (содержащий путь к объекту).

Один аспект, который вы могли заметить, это то, что объект переданный  через директиву выглядит как CSS класс. По факту это почти CSS класс, за исключением того, что мы добавляем переменные и функции в него. Так же, наша функция getRandomColor снова вызывается в коде для установки цвета. Не то, чтобы это обязательно, но лучше чем жестко кодить цвет, мы решили добавить некую приправу. И теперь мы имеем два новых элемента: кнопки ввода с привязками ngModel к переменным, указанным в стиле, для целей реакции.

После добавления этих файлов и компиляции, ваша страничка должна выглядеть подобно этому:
Теперь посмотрим, что же изменилось. Несмотря на то, что мы настроили параметры по умолчанию, давайте откроем файл app.component.html чтобы посмотреть что там :

Мы добавили новый div который связан через директиву ngStyle, и далее мы передаем ей объект.
Объект состоит из 3 свойств: color, background-color и font-size.

Атрибуты цвета настроены как случайный цвет от нашей функции цвета, в то время как background-color и font-size настроены вручную. После всего, мы находим два ввода со связкой через ngModel, которые делают эти поля функциональными. Так, если мы напечатаем 18px в поле ввода шрифта – получим текст размера 18px; таким же образом, если ввести orange в поле ввода цвета фона – получим соответствующий цвет фона.

Начнем работу с директивами класса в Angular 2+

Теперь давайте двигаться к вариантам использования директив класса.

Использование директивы className

Давайте откроем файл /app/app.component.css и добавим некоторые CSS классы в него:

В коде сверху мы установили настройки двух классов с разными свойствами. Позже мы вернемся к конкретному примеру их использования.
Откроем файл src/app/app.component.html и заменим содержимое следующим контентом:

Как Вы заметили, шрифт для последнего текста изменился.

И так, что же мы проделали тут?

Мы добавили некоторые классы к нашим CSS файлам и используя директиву className для определения требуемого класса в нашем HTML документе.

И теперь посмотрим на результат нашей работы:

Несмотря  на то, что это может показаться, что это бессмысленно, так как это тоже самое что назначить class=»style1″ напрямую, давайте все-таки посмотрим на пример, чтобы увидеть где же использование сlassName станет полезным.

Откройте ваш файл src/app/appcomponent.ts и замените его следующим кодом:

Если посмотреть на код сверху, увидим что мы добавили только одно внешнее свойство public my_Class=’style1′ , которое просто содержит класс, который мы вызываем. Так же в коде есть дополнительный метод для изменения значения класса свойства my_class , который, собственно, и переключает классы.

Теперь  давайте добавим следующий HTML код:

Если мы нажмем кнопку, заметим, что классы поменяются местами.
Разберем, что же мы проделали тут. Мы использовали атрибут [className] для назначения нашего класса, который переключается приведенной в коде кнопкой.

Использование привязки класса через ngClass

Следующим шагом привяжем класс используя привязку через ngClass.

Мы также можем использовать ngClass для загрузки динамических классов.

Так же, как и ClassName мы можем загружать классы строкой, массивом и даже целыми объектами.
Использование объектов  это большое преимущество ngClass над className, к примеру:

Следует заметить, что эти три метода дадут одинаковый результат. Но давайте взглянем на третью опцию, которая использует объект, детальнее.
У нас есть возможность передать объект директиве ngClass для использования. Объект включает в себя ключ ко всем стилям, которые мы хотим загрузить и логическое значение того, правда true это или ложь false. Давайте посмотрим на пример ниже.
Откроем наш файл src/app/appcomponent.ts и заменим содержимое следующим:

В коде сверху мы заметим, что добавили два свойства и две переменные isClass1Visible и isClass2Visible. Две переменные содержат логическое значение по умолчанию для style1 и style2.

Теперь обновим структуру нашего HTML кода к такому виду:

Итак, что же мы добавили: добавили div c привязкой ngСlass, добавили наш объект содержащий классы и логические значения с параметром ложь false. Так же мы имеем два значения которые меняют логическое значение со значения false на true, и по клику классы отображения заменяют друг друга. В итоге наша страничка должна выглядеть подобно:
Я надеюсь, теперь вы понимаете как легко играться со стилями через директивы ngStyle и ngClass для усовершенствования юзабилити и функциональности ваших веб приложений. Используя подход в этом посте, вам не потребуется библиотека jQuery для реализации переключений и вкладок. Да и вдобавок, этот метод существенно проще.

 

Источник: https://scotch.io

Читайте также:

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

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