Angular自定义指令问题：按钮悬停时需同步修改背景与文字颜色

当前自定义指令appControlhover已实现按钮悬停时的背景色切换，要新增悬停时修改文字颜色、非悬停时恢复默认的功能，可按以下方式修改代码：

1. 修正自定义指令代码 #

核心是补充文字颜色的输入属性，在鼠标进入/离开事件中分别设置对应颜色：

import { Directive, OnInit, HostListener, Input, HostBinding } from '@angular/core';

@Directive({
  selector: '[appControlhover]'
})
export class ControlhoverDirective implements OnInit {
  @Input() defaultColor: string;
  @Input() highlightColor: string;
  @Input() isValid: boolean = true;
  
  // 接收组件传入的悬停文字颜色
  @Input() btnhovertxtcolor: string;
  // 非悬停时的默认文字颜色（可选，不传则保留元素原有颜色）
  @Input() defaultTxtColor: string = '';

  @HostBinding('style.backgroundColor') backgroundColor: string;
  // 绑定文字颜色样式，变量名统一避免混乱
  @HostBinding('style.color') textColor: string;

  ngOnInit() {
    // 初始化背景色
    this.backgroundColor = this.defaultColor;
    // 初始化文字颜色：优先用传入的默认色，否则保留元素原有样式
    this.textColor = this.defaultTxtColor || '';
  }

  @HostListener('mouseenter') mouseenter() {
    if (this.highlightColor !== 'none') {
      this.backgroundColor = this.highlightColor;
      // 悬停时切换为指定的文字颜色
      this.textColor = this.btnhovertxtcolor;
    } else {
      this.backgroundColor = this.defaultColor;
    }
  }

  @HostListener('mouseleave') mouseleave() {
    this.backgroundColor = this.defaultColor;
    // 离开时恢复默认文字颜色
    this.textColor = this.defaultTxtColor || '';
  }
}

2. 组件模板与TS代码调整 #

如果需要指定默认文字颜色，在模板中新增绑定，并在组件TS中定义对应值：

按钮模板 #

<button class="btn-submit" type="button" appControlhover 
  [defaultColor]="btnBackgroundColor" 
  [highlightColor]="btnhoverColor" 
  [btnhovertxtcolor]="btnhovertxtcolor"
  [defaultTxtColor]="btnDefaultTxtColor"
  style="margin-top: 20px"                            
  (click)="Submit()">      
    Send
</button>

组件TS代码 #

btnBackgroundColor='#28e979';
btnhoverColor='#a6dabb';
btnhovertxtcolor='#848f90';
btnDefaultTxtColor='#000'; // 设置你的默认文字颜色

修改说明 #

• 新增btnhovertxtcolor输入属性，接收组件传递的悬停文字颜色值
• 新增defaultTxtColor输入属性，用于定义非悬停状态的文字颜色，若未传入则保留按钮原有文字颜色
• 简化了原代码中冗余的条件判断逻辑，保持代码简洁
• 通过HostBinding绑定文字颜色样式，在鼠标事件中动态切换，实现悬停效果

内容的提问来源于stack exchange，提问作者user3653474