在 Angular 指令中将 CSS 变量用于 CSS 悬停属性？

Question

我有以下指令：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: 'd-btn', 
  host: {}
})

export class ButtonDirective {
    constructor(private el: ElementRef){}
    @HostListener('mouseover')
    onMouseOver() {
        this.el.nativeElement.style.transition;
        this.el.nativeElement.style.backgroundColor = "var(theme-color-1)";
    }
    
  
    @HostListener('mouseout')
    onMouseLeave() {
        this.el.nativeElement.style.transition;
        this.el.nativeElement.style.backgroundColor = 'transparent';
    }
}

如果我写了一种颜色而不是“var(theme-color-1)”，它会在用户将鼠标悬停在元素上时添加给定的颜色。但我想给它一个可变的颜色，因为我正在处理不同的颜色主题。有什么想法吗？

Answer 1

解决方案应该很简单，不是 Angular 问题。您可以通过 CSS:

轻松解决这个问题

button[d-btn] {
  transition: all .5s;
  background: transparent; 
}
button[d-btn]:hover {
  transition: all .5s;
  background: var(--theme-color-1); 
}

Answer 2

几件小事。要使用 css 变量，您需要在其前面加上 --。

@Directive({
  selector: 'button[d-btn]'
})
export class MyButtonDirective {
  constructor(private el: ElementRef){}
  @HostListener('mouseover')
  onMouseOver() {
      this.el.nativeElement.style.transition;
      this.el.nativeElement.style.backgroundColor = "var(--theme-color-1)";
  }
  

  @HostListener('mouseout')
  onMouseLeave() {
      this.el.nativeElement.style.transition;
      this.el.nativeElement.style.backgroundColor = 'transparent';
  }
}

还要确保定义了相同的颜色，例如 style.css。

:root {
  --theme-color-1: red !important;
}

像这样将指令应用于按钮。

<button d-btn (click)="onClick($event)">Click Directive Button</button>

这是一个工作示例：https://stackblitz.com/edit/angular-button-1k8ycq?file=app%2Fbutton.directive.ts

在 Angular 指令中将 CSS 变量用于 CSS 悬停属性？

Using CSS variable for a CSS hover property in Angular directive?

typescript

angular-directive

angular

在 Angular 指令中将 CSS 变量用于 CSS 悬停 属性？

Using CSS variable for a CSS hover property in Angular directive?

typescript

angular-directive

angular

在 Angular 指令中将 CSS 变量用于 CSS 悬停属性？