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

【问题标题】：Angular 2+ Can you add/remove a CSS class based on html data property?Angular 2+ 你可以添加/删除基于 html 数据属性的 CSS 类吗？
【发布时间】：2021-01-12 09:08:09
【问题描述】：

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

现在我有以下内容：

包含another list that floats right next to it 的列表项
目前，我正在使用 mouseover/out 事件根据类中的属性显示和隐藏元素

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

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

谢谢！

更新

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

Here is a working StackBlitz

【问题讨论】：

标签： angular attr ng-class

【解决方案1】：

Demo 你可以使用 ngClass 和事件来实现。

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

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

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

【讨论】：

感谢您的回复，我想知道 isHovered 是从哪里来的？它是一些默认的 angular/html 属性还是类属性？
如果您有一个元素，则在组件中创建一个属性，如 isHovered 为布尔值，如果您有数组对象，请为此添加一个属性。这是由您创建以分配给班级
因为现在我正在使用类属性，而这正是我要避免的。因为例如，如果我有 10 个 ui 元素，那么在我的类中有 10 个 bool 属性只是为了显示/隐藏这个列表会变得非常混乱。
Okey 正如我所说，如果你有 list 元素，那么为 list 中的每个对象提供属性。我现在放演示
我现在加了demo来回答

【解决方案2】：

您可以使用以下语法添加/删除类：

<div [class.your-class-name]="condition"></div>

为了在不需要组件的情况下引用元素，您可以使用Template Reference Variable，如下所示：

<div #abc></div>

现在 abc 可以在您的模板中使用来引用它的 div 元素

【讨论】：

感谢您的回答。我意识到我不善于解释我的问题。我更新了问题并添加了问题的解决方案。