如何使用Angular自定义color指令实现卡片hover按分类切换颜色

实现步骤如下： #

1. 先修正自定义指令的bug

你的现有指令在constructor中读取@Input属性是拿不到值的，Angular的输入属性会在构造函数执行完成后才完成赋值，同时你重复写了两次设置颜色的逻辑，优化后的指令代码：

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

@Directive({
  selector: "[appColor]",
})
export class ColorDirective implements OnInit {
  // 可以直接把输入属性名和指令选择器对齐，使用起来更直观
  @Input() appColor: string;
  constructor(private element: ElementRef, private render: Renderer2) {}

  ngOnInit() {
    // 初始化默认颜色
    this.ChangeColor("black");
  }

  @HostListener("mouseenter") onMouseEnter() {
    this.ChangeColor(this.appColor);
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.ChangeColor("black");
  }

  ChangeColor(color: string) {
    this.render.setStyle(this.element.nativeElement, "color", color);
  }
}

如果你不想修改原有@Input的别名配置，保持@Input("color") color: string的写法也可以，后续绑定的时候对应调整属性名即可。

2. 在卡片组件中配置分类和颜色的映射关系

在你展示todo卡片的组件ts文件中，新增分类到颜色的映射配置，按你实际的分类项调整对应颜色值：

// 卡片组件ts文件
categoryColorMap: Record<string, string> = {
  '工作': '#ff4d4f',
  '生活': '#52c41a',
  '学习': '#1890ff',
  '其他': '#faad14'
};

如果你的todo对象本身就存了对应分类的颜色值，这一步可以省略，直接绑定todo的颜色属性即可。

3. 修改模板代码绑定指令

找到你模板中class为card的div节点，添加自定义指令并绑定对应颜色：

<div routerLink="/todo/{{ todo.id }}" class="card" *ngFor="let todo of todos | filter:searchValue"
  [appColor]="categoryColorMap[todo.category]">
  <!-- 其余原有代码保持不变 -->
  <button class="btn btn-danger" (click)="deleteTodo(todo.id)">X</button>
  <div class="card-body">
    <h3 [class.completed]="todo.completed">{{todo.title | uppercase}}</h3>
    <p [class.completed]="todo.completed">{{todo.description}}</p>
  </div>
  <div>
    <div class="edit-button">
      <div>Category: {{todo.category}}</div>
      <div>
        <button class="btn"><a routerLink="/todo/{{todo.id}}">Edit</a></button>
        <button class="btn" (click)="completeTodo(todo.id)">Complete</button>
      </div>
    </div>
  </div>
</div>

如果你没有修改指令的@Input别名，还是保持@Input("color")的写法，把上面的[appColor]改成[color]即可。

如果需要hover的时候修改卡片的背景色而不是文字颜色，只需要把指令中ChangeColor方法里的"color"改成"backgroundColor"即可。

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