Использование атрибута aria в угловом компоненте приводит к ошибке - PullRequest
Новая
       18

Использование атрибута aria в угловом компоненте приводит к ошибке

1 голос
/ 04 апреля 2019

У меня есть интерактивная карта, которую я хотел бы превратить в компонент.Я хочу создать @Input для уникального имени (идентификатора) экземпляра, который я могу использовать aria-labelledby в названии карты: 

    <div
      class="card card-default category-widget"
      id="{{ widgetID }}"
      matRipple
      aria-labelledby="{{widgetTitle}}"
      role="button"
      tabindex="0"
    >
      <div class="card-body category-widget-icon" aria-hidden="true">
        <i class="pbi-icon-outline pbi-wifi"></i>
      </div>
      <div class="card-footer">
        <h4 class="category-widget-title" id="{{ widgetTitle }}">Widget Title</h4>
        <p class="category-widget-description">
          Widget description text
        </p>
      </div>
    </div>

За исключением этого, выдается ошибка:

Can't bind to 'aria-labelledby' since it isn't a known property of 'div'.

Без aria-labelledby компонент работает нормально.

1 Ответ

1 голос
/ 04 апреля 2019

Вместо этого используйте [attr.aria-labelledby]="widgetTitle", потому что это атрибут adhoc.Angular ничего не заполняет для многих атрибутов, как для свойств DOM и т. Д. Поэтому такие вещи, как ARIA или, скажем, атрибуты data-* необходимо указывать как атрибут через attr. и одностороннюю привязку.

...