在Angular项目中,如何根据不同的状态或条件动态改变UI元素的样式是一个常见的问题。本文将通过一个实际的例子,展示如何在Angular中使用CSS变量和:hover选择器来实现按钮颜色在悬停时的变化。
背景
假设我们有一个通知组件(toast),其中包含多个按钮,每个按钮有不同的颜色。我们希望当用户将鼠标悬停在按钮上时,按钮的文本颜色能够改变为按钮本身的颜色。
初始尝试
起初,我们可能尝试使用Angular的模板语法来处理这种情况。以下是一个尝试的代码片段:
@for (button of toast.buttons; track button){<button[ngStyle]="hovered === 1 ? {'background-color