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属性会导致错误

1 个答案: