Динамические классы и стили
Реактивно связывайте классы и стили.
«Динамические классы и стили» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Динамическая стилизация в шаблонах
Angular позволяет привязывать классы и встроенные стили к состоянию компонента, поэтому интерфейс автоматически обновляется при изменении данных.
Привязка одного класса
Используйте [class.name], чтобы переключать один класс CSS на основе логического выражения.
<div [class.active]="isActive">Item</div>
// component
isActive = true;Несколько классов с ngClass
ngClass применяет сразу несколько классов, используя объект, в котором имена классов сопоставлены с логическими значениями.
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>ngClass с массивами и строками
ngClass также принимает строку с именами классов или массив.
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>Привязка одного стиля
Используйте [style.property], чтобы привязать одно встроенное свойство CSS к значению.
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";Привязки стилей с единицами измерения
Добавьте суффикс единицы измерения, чтобы привязывать числовые значения с такими единицами, как пиксели или проценты.
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;Несколько стилей с ngStyle
ngStyle задаёт сразу несколько встроенных стилей из объекта.
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>Привязка класса разрешает конфликт
Если статические и привязанные классы пересекаются, Angular объединяет их; привязка управляет наличием динамического класса, не удаляя статические классы.
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->Реакция на состояние
Привязки повторно вычисляются во время обнаружения изменений, поэтому обновление свойства компонента сразу изменяет стиль элемента.
toggle() {
this.isActive = !this.isActive;
}Выбор между классом и стилем
Для удобства сопровождения отдавайте предпочтение привязкам классов с правилами CSS; прямые привязки стилей оставляйте для действительно динамических значений, таких как вычисляемая ширина или цвет.
С сигналами
Привязки классов и стилей также работают с сигналами: просто вызовите сигнал в выражении шаблона.
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);Быстрая проверка
Проверьте, насколько хорошо Вы поняли динамические классы и стили.
Итоги
Переключайте один класс с помощью [class.name], а несколько — с помощью ngClass; задавайте один стиль через [style.prop] (с необязательной единицей измерения) или несколько через ngStyle. Привязки автоматически реагируют на состояние, включая сигналы.
Часто задаваемые вопросы
Урок «Динамические классы и стили» бесплатный?
Да — полный текст урока «Динамические классы и стили» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Динамические классы и стили»?
Реактивно связывайте классы и стили. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Динамические классы и стили»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Стили в области компонента
- Режимы инкапсуляции представления
- Стилизация host и host-context
- Динамические классы и стили