在Angular中,你可以使用@HostBinding
和@HostListener
注解来动态选择多个全局样式。
首先,创建一个新的指令,并使用@HostBinding
注解来绑定要动态选择的全局样式类。例如,我们创建一个名为StyleSelectorDirective
的指令,并绑定一个名为selectedStyle
的属性:
import { Directive, HostBinding, HostListener } from '@angular/core';
@Directive({
selector: '[styleSelector]'
})
export class StyleSelectorDirective {
@HostBinding('class.selectedStyle') selectedStyle = false;
constructor() { }
@HostListener('mouseenter') onMouseEnter() {
this.selectedStyle = true;
}
@HostListener('mouseleave') onMouseLeave() {
this.selectedStyle = false;
}
}
然后,在你的组件模板中,使用styleSelector
指令并动态选择全局样式。例如,我们在组件的div元素上使用styleSelector
指令:
选择我
最后,在全局样式表(例如styles.css)中定义所需的样式类。例如,我们定义了一个名为selectedStyle
的样式类:
.selectedStyle {
background-color: yellow;
}
当鼠标进入和离开div元素时,StyleSelectorDirective
中的onMouseEnter
和onMouseLeave
事件会触发,并相应地动态选择或取消选择selectedStyle
样式类。
希望这可以帮助你解决问题!