Angular：在伪类中动态更改 SCSS 属性

【问题标题】：Angular: dynamically change SCSS property in pseudo-classAngular：在伪类中动态更改 SCSS 属性
【发布时间】：2020-02-17 11:18:41
【问题描述】：

在我的角度组件中，我需要动态更改一项的:hover 伪类的边框颜色。

颜色是在组件的对象变量中找到的，但我不知道如何专门针对悬停。

在 TS 组件中：

items = [
  { id: 0, color: "#ff4400" },
  { id: 1, color: "#faa73d" },
];

在 SCSS 文件中：

.menuItem {
  border-color: #fff;

  &:hover {
  }
}

所以基本上我希望对象中的颜色仅动态应用于悬停状态而不是默认状态。

谢谢！

【问题讨论】：

【解决方案1】：

不可能对具有伪类的 HTML 元素进行样式设置，因为伪元素不是 DOM 树的一部分，因此不会公开任何可用于与它们交互并为这些元素设置样式的 DOM API。

但就像 hack 一样，您可以使用 mouseover 和 mouseout 事件为您的用例动态切换样式，例如 -

<ul>
  <li *ngFor='let item of items' #ele (mouseover)='ele.style.color = item?.color' (mouseout)='ele.style.color = "black"'>{{item?.id}}</li>
</ul>

【讨论】：