在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"，因为它是一个adhoc属性。对于许多属性，Angular不会像对待DOM属性那样烘焙任何东西。所以像ARIA或者说，data-*属性需要通过attr.和单向绑定指定为属性。