如果主机有，则添加 CSS（单击）答案

【问题标题】：Add CSS if host has (click)如果主机有，则添加 CSS（单击）
【发布时间】：2020-05-08 23:30:13
【问题描述】：

我正在构建一个库，并且我有一个 <my-card> 组件。它是一个经常有一个(click) 处理程序的组件。

我要做的是在组件附加了(click) 时自动添加cursor: pointer。

例如，<my-card> 将具有默认光标，<my-card (click)="onClick()> 将cursor: pointer 应用于组件元素。

有什么干净的方法吗？

【问题讨论】：

标签： html css angular

【解决方案1】：

如果您能够将 (click) 更改为 click，那么您可以使用 CSS 来做到这一点。

HTML：

<my-card>Look at me</my-card>
<my-card click="onClick()">Click me</my-card>

CSS：

my-card {
    border-radius: 3px;
    display: inline-block;
    padding: 5px;
}
[click] {
    background-color: red;
    color: white;
    cursor: pointer;
}

CSS 中的[click] 部分引用元素的属性。因此，这将针对您使用 click 属性的任何元素。如果您只想使用 click 属性定位任何 <my-card> 元素，那么您可以将 CSS 更改为 my-card[click]。

这里有一个小提琴供你参考：https://jsfiddle.net/8w9Lqxr4/1/

【讨论】：

【解决方案2】：

Angular 的做法是使用指令，看看这个例子：

import { HostBinding, Directive } from '@angular/core'
@Directive({
   selector: '[myClick]'
})
class MyClickDirective {
  @HostBinding('class.mousepointer') private isClick: boolean;

  constructor(private el: ElementRef,
              private renderer: Renderer) {
  }

  @HostListener('click') onMyElemClicked() {
    this.isClick =!this.isClick;
  }
}

我没有测试过这个例子，但这是你必须调查的方式。

【讨论】：