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

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

Смотрите код для рабочего примера, содержащего фрагменты кода, приведенные в этом руководстве.

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

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

Синтаксис

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

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

Когда выражение разрешается в null или undefined, Angular полностью удаляет атрибут.

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

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

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

<!-- 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.

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

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

Иногда существуют различия между названием свойства и атрибута.

colspan является атрибутом <td>, а colSpan с заглавной "S" — свойством. При использовании привязки к атрибутам используйте colspan со строчной буквой "s".

Подробнее о том, как привязать свойство colSpan, смотрите в разделе colspan и colSpan раздела Привязка свойств.

Что дальше

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

2.05.2022

Комментарии