Angular 2+ 能否基于HTML data属性动态添加/移除CSS类？

现有实现现状 #

• 页面存在带旁侧悬浮嵌套子列表的列表项，对应交互效果可查看配套演示截图
• 当前显隐逻辑依托组件类的自定义属性实现，通过mouseover/mouseout事件完成嵌套列表的显隐切换

最初的优化思路 #

核心目标是摆脱对组件类自定义属性的依赖，改为直接在HTML元素上挂载自定义数据属性，通过属性值管理元素的显隐状态。
如果该实现思路存在偏差，也可以参考更适配Angular开发场景的成熟实现方案。

调整后的落地逻辑 #

经过思路校验优化，最终确定的轻量化实现方案如下：

• 给所有需要管控显隐的目标元素，绑定默认值为"false"的[attr.data-visible]属性
• mouseover事件处理：传入当前触发事件的HTML元素作为参数，将对应元素的data-visible值从false修改为true
• mouseout事件处理：执行反向操作，将对应元素的data-visible值从true改回false
• 可运行的参考实现核心逻辑，可查看对应演示工程下src/app/app.component.ts的代码内容

内容的提问来源于stack exchange，提问作者Denis Sabău