时间戳

首页 > 解决方案 > Angular 2+ 你可以添加/删除基于 html 数据属性的 CSS 类吗？

angular - Angular 2+ 你可以添加/删除基于 html 数据属性的 CSS 类吗？

问题描述

首先，我想为这个问题添加更多背景信息。

现在我有以下内容：

我想通过消除在类中拥有属性的需要而使其更具动态性，只需将数据属性添加到 html 元素，希望我可以使用所述属性管理它的状态。

这整个想法可能是错误的，所以如果有其他方法可以实现这一点，请引导我走向正确的方向。

谢谢！

更新

经过一番思考，我稍微改变了我的方法，而不是依赖组件属性，我向每个元素添加了一个新的 [attr.data-visible] 属性，其默认值为“false”。然后在 mouseover 事件中，我添加了一个方法，该方法将 html 元素作为参数，然后将数据可见值从 false 更改为 true，反之亦然。

这是一个有效的 StackBlitz

标签： angularattrng-class

解决方案

演示 您可以使用 ngClass 和事件来完成。

 [ngClass]="{'your_class': isHovered}"
 (mouseover)="isHovered=true"
 (mouseout)="isHovered=false"

如果您有一个数组对象并在其中执行此操作，则为数组中的每个对象赋予属性

 [ngClass]="{'your_class': data.isHovered}"
    (mouseover)="data.isHovered=true"
    (mouseout)="data.isHovered=false"

推荐阅读