在角方向上使用CSS悬停特性？
在角方向上使用CSS悬停特性？
提问于 2019-05-02 02:57:18
这是指令，默认的指令。
import { Directive, Input, Renderer2, ElementRef } from '@angular/core';
@Directive({
selector: '[newBox]'
})
export class BoxDirective {
@Input() backgroundColor = '#fff';
constructor(private el: ElementRef, private renderer: Renderer2) {}
ngOnInit(): void {
this.renderer.setStyle(this.el.nativeElement, 'background-color', this.backgroundColor);
}
}现在，在悬停时，我要改变背景颜色。我如何在指令中做到这一点？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-02 03:01:09
使用HostListener侦听事件
@HostListener('mouseover')
onMouseOver() {
this.backgroundColor = '#fff';
}
@HostListener('mouseout')
onMouseOut() {
this.backgroundColor = '#000';
}Stack Overflow用户
发布于 2022-04-21 07:08:03
import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
@Directive({
selector: '[appHover]'
})
export class HoverDirective implements OnInit {
@HostListener('mouseenter') onMouseEnter(){
this.renderer2.setStyle(this.elRef.nativeElement,'fontSize','100px')
this.renderer2.setStyle(this.elRef.nativeElement,'color','#fff')
this.renderer2.setStyle(this.elRef.nativeElement,'backgroundColor','orange')
}
@Input('appHover') case:string='';
@HostListener('mouseout') onMouseOut(){
this.renderer2.setStyle(this.elRef.nativeElement,'fontSize',this.case)
this.renderer2.setStyle(this.elRef.nativeElement,'color','#fff')
this.renderer2.setStyle(this.elRef.nativeElement,'backgroundColor','orange')
}
constructor(private elRef:ElementRef,private renderer2:Renderer2) { }
ngOnInit(): void {
}
}goto app.component.html
then use directive.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55950918
复制相关文章
【Android Gradle 插件】Gradle 扩展属性 ④ ( 扩展属性访问方式 | 直接访问扩展属性 | 通过 ext 对象访问 | 在 gradle.properties 中定义扩展属性 )
![【Groovy】集合声明与访问 ( 使用 [] 创建 ArrayList 和 LinkedList 集合 | 集合赋初值 | 使用下标访问集合 | 使用 IntRange 作为下标访问集合 )](https://developer.qcloudimg.com/http-save/yehe-2542479/7aabf09c8aa392ed47ee394c3cb7ac05.png)
相似问题
使用角度上的renderer2在按钮中设置(单击)属性
在`compareWith`函数中以角度访问类属性
Renderer2角度需要吗？
角度8中接口中的访问集合
访问项集合中的属性
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
