数据悬停角度2不工作

Question

Angular无法识别悬停的数据。

无法绑定到“data-hover ”,因为它不是“span”的已知属性

我试过span，div，运气不好。现有页面严重依赖数据悬停，所以重写不是一个选项。

<a class="main-item" routerLink='{{ item?.url}}'>
    <span class="main-item-hover" data-hover="{{item?.label}}">{{item?.label}}</span>
</a>

这段代码是完全没有角

编辑:

.main-item-hover:before {
  content: attr(data-hover);
  font-weight: 600;
  position: absolute;
  top: 100%;
}

这就是css中使用数据悬停的方式。

思想？

Answer 1

尝试使用方括号和属性绑定重写代码，如

<a class="main-item" [routerLink]="item?.url">
  <span class="main-item-hover" [attr.data-hover]="item?.label">
    {{ item?.label }}
  </span>
</a>

普朗克：https://plnkr.co/edit/v49Qe7FInPToKXf952Et?p=preview