探索Angular中的动态样式：按钮颜色变化

在Angular项目中，如何根据不同的状态或条件动态改变UI元素的样式是一个常见的问题。本文将通过一个实际的例子，展示如何在Angular中使用CSS变量和:hover选择器来实现按钮颜色在悬停时的变化。

背景

假设我们有一个通知组件（toast），其中包含多个按钮，每个按钮有不同的颜色。我们希望当用户将鼠标悬停在按钮上时，按钮的文本颜色能够改变为按钮本身的颜色。

初始尝试

起初，我们可能尝试使用Angular的模板语法来处理这种情况。以下是一个尝试的代码片段：

@for (button of toast.buttons; track button){<button[ngStyle]="hovered === 1 ? {'background-color