Перейти к содержанию

Привязка классов и стилей

Используйте привязки классов и стилей для добавления и удаления имен классов CSS из атрибута class элемента и для динамической установки стилей.

Предварительные условия

Привязка к одному CSS class

Чтобы создать привязку к одному классу, введите следующее:

[class.sale]="onSale"

Angular добавляет класс, когда связанное выражение onSale истинно, и удаляет класс, когда выражение ложно — за исключением undefined. Дополнительную информацию смотрите в делегирование стилей.

Привязка к нескольким классам CSS

Чтобы привязать несколько классов, введите следующее:

[class]="classExpression"

Выражение может быть одним из:

  • Строка имен классов, ограниченная пробелами.
  • Объект с именами классов в качестве ключей и истинными или ложными выражениями в качестве значений.
  • Массив имен классов.

При использовании объектного формата Angular добавляет класс, только если его связанное значение истинно.

При использовании любого объектоподобного выражения — такого как object, Array, Map или Set — идентификатор объекта должен измениться, чтобы Angular обновил список классов. Обновление свойства без изменения идентичности объекта не имеет эффекта.

Если существует несколько привязок к одному и тому же имени класса, Angular использует "style precedence", чтобы определить, какую привязку использовать.

В следующей таблице приведен синтаксис привязки класса.

Тип привязки Синтаксис Тип инпута Пример значений
Привязка к одному классу [class.sale]="onSale" boolean | undefined | null true, false
Многоклассовая привязка [class]="classExpression" string "my-class-1 my-class-2 my-class-3"
Многоклассовая привязка [class]="classExpression" Record<string, boolean | undefined | null> {foo: true, bar: false}
Многоклассовая привязка [class]="classExpression" Array<string> ['foo', 'bar']

Привязка к одному стилю

Чтобы создать привязку к одному стилю, используйте префикс style, за которым следует точка и имя стиля CSS.

Например, чтобы установить стиль width, введите следующее: [style.width]="width".

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

  1. Чтобы написать стиль в тире, введите следующее:

    1
    <nav [style.background-color]="expression"></nav>

  2. Чтобы написать стиль в camelCase, введите следующее:

    1
    <nav [style.backgroundColor]="expression"></nav>

Привязка к нескольким стилям

Чтобы переключить несколько стилей, привяжитесь к атрибуту [style]— например, [style]="styleExpression". Выражение styleExpression может быть одним из:

  • Строковый список стилей, например, ширина: 100px; высота: 100px; background-color: cornflowerblue;.
  • Объект с именами стилей в качестве ключей и значениями стилей в качестве значений, например {width: '100px', height: '100px', backgroundColor: 'cornflowerblue'}.

Обратите внимание, что привязка массива к [style] не поддерживается.

При привязке [style] к выражению объекта, идентификатор объекта должен измениться, чтобы Angular обновил список классов. Обновление свойства без изменения идентичности объекта не имеет эффекта.

Пример связывания в одном и нескольких стилях

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@Component({
    selector: 'app-nav-bar',
    template: ` <nav [style]="navStyle">
        <a [style.text-decoration]="activeLinkStyle"
            >Home Page</a
        >
        <a [style.text-decoration]="linkStyle">Login</a>
    </nav>`,
})
export class NavBarComponent {
    navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
    linkStyle = 'underline';
    activeLinkStyle = 'overline';
    /* . . . */
}

Если существует несколько привязок к одному и тому же атрибуту стиля, Angular использует "styling precedence", чтобы определить, какую привязку использовать.

В следующей таблице приведен синтаксис привязки стиля.

Тип привязки Синтаксис Тип входа Пример входных значений
Привязка к одному стилю [style.width]="width" string | undefined | null "100px"
Привязка к одному стилю [style.width.px]="width" number | undefined | null 100
Привязка к многим стилям [style]="styleExpression" string "width: 100px; height: 100px"
Привязка к многим стилям [style]="styleExpression" Record<string, string | undefined | null> {width: '100px', height: '100px'}

Приоритет стилей

У одного элемента HTML список классов CSS и значения стилей могут быть привязаны к нескольким источникам (например, привязка к хосту из нескольких директив).

Что дальше

📅 9.05.2022

Комментарии