Связывание атрибутов¶

Привязка атрибутов в Angular позволяет задавать значения атрибутов напрямую. С помощью привязки атрибутов можно улучшить доступность, динамически изменять стиль приложения и управлять несколькими классами или стилями CSS одновременно.

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

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

Синтаксис¶

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

1

<p [attr.attribute-you-are-targeting]="expression"></p>

Привязка атрибутов ARIA¶

Одним из основных вариантов использования привязки атрибутов является установка атрибутов ARIA.

Для привязки к атрибуту ARIA введите следующее:

1
2
3
4

<!-- create and set an aria attribute for assistive technology -->
<button type="button" [attr.aria-label]="actionName">
    {{actionName}} with Aria
</button>

Привязка к colspan¶

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

Чтобы использовать привязку атрибута <td> к атрибуту colspan, выполните следующие действия.

1. Укажите атрибут colspan, используя следующий синтаксис: [attr.colspan].

2. Установите [attr.colspan] равным выражению.

В следующем примере вы связываете атрибут colspan с выражением 1 + 1.

1
2
3
4

<!--  expression calculates colspan=2 -->
<tr>
    <td [attr.colspan]="1 + 1">One-Two</td>
</tr>

Эта привязка заставляет <tr> охватывать две колонки.

Что дальше¶

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

2.05.2022

Комментарии