在 Angular 指令中使用 CSS 悬停属性？

Posted 2023-02-22

【中文标题】在 Angular 指令中使用 CSS 悬停属性？

【英文标题】：Using CSS hover property in Angular directive?

【发布时间】：2019-09-20 21:14:50

【问题描述】：

这是指令，默认的。

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);
  

现在，在悬停时，我希望改变背景颜色。我该如何在指令中做到这一点？

【参考方案1】：

使用HostListener 监听事件

  @HostListener('mouseover')
  onMouseOver() 
    this.backgroundColor = '#fff';
  

  @HostListener('mouseout')
  onMouseOut() 
    this.backgroundColor =  '#000';