改变卡片颜色的指令

Question

我有一个改变卡片颜色的指令

@Directive({
  selector: "[appColor]",
})
export class ColorDirective {
  @Input("color") color: string;
  constructor(private element: ElementRef, private render: Renderer2) {
    this.render.setStyle(this.element.nativeElement, "color", this.color);
    element.nativeElement.style.color = this.color;
  }

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

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

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

如何传递它以便当我将鼠标悬停在卡片上时，卡片的颜色会根据它们的（卡片）类别而变化显示卡片的组件

          <div *ngIf="todos.length; else noTodos">
            <div routerLink="/todo/{{ todo.id }}" class="card" *ngFor="let todo of todos | filter:searchValue">
              <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>

          </div>

Answer 1

您可以将指令选择器添加到您想要的 html 组件。

像这样

<div appColor color="red"></div>

这是使用您的代码的完整 example。

改变卡片颜色的指令

Directive for changing the color of the card

angular-directive

angular