在 Angular 组件中使用 aria 属性导致错误

Question

我有一张可点击的卡片，我想将其制作成一个组件。我想为实例的唯一名称 (id) 创建一个 @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，组件工作正常。

Answer 1

而是使用 [attr.aria-labelledby]="widgetTitle"，因为它是一个临时属性。 Angular 不会像 DOM 属性那样为许多属性添加任何东西，等等。所以像 ARIA 或者说 data-* 属性需要通过 attr. 和一种单向绑定。

在 Angular 组件中使用 aria 属性导致错误

Using aria attribute in Angular component causes error

wai-aria

angular-components

angular