角度组件悬停类动态

Question

我有一个以参数为输入的角度分量。如果用户悬停在元素上，此参数确定要应用的类(不是是否应用类，而是用户悬停在该元素上时要应用的类名(

这是组件的一个小缩写

@Input() hoverClassName: string;

在组件中，我有一个span元素，当用户悬停在该元素上时，我如何将该类动态应用于span元素，理想情况下，我正在寻找类似于的东西

<span (onMouseOverClass)="hoverClassName"/>

这是不是可以在没有太多.ts代码的情况下完成的事情？

Answer 1

您可以实现它，如下所示：

组件：

@Input() public hoverClassName: string;
public hovered: boolean;

模板：

<span 
(mouseover)="hovered = true"
(mouseout)="hovered = false"
[ngClass]="hovered && hoverClassName">
</span>