html - 数据悬停 angular2 不工作

Question

Angular 无法识别数据悬停。

无法绑定(bind)到“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>

这段代码在没 Angular 情况下完美运行

编辑:

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

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

想法？

Answer 1

尝试使用方括号和属性绑定(bind)重写您的代码

<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