css - 如何将光标指针属性应用于(单击)事件处理程序?

<i class="cursor-pointer" (click)="sort()"></i>

我们的代码库有很多这样的冗余类。我一直在寻找一种方法,只要有(单击)事件处理程序,就可以应用光标指针属性。

在 Angular 2之前,您可以将css应用于 Angular 属性,但这不再可能。 Change the mouse pointer on ngclick
[ng-click]{
    cursor: pointer;
}

最佳答案

您可以创建一个指令,该指令通过单击绑定(bind)选择所有元素并应用样式。

click.cursor.directive.ts:

@Directive({
  selector: '[click]'
})
export class ClickCursorDirective {
  @HostBinding('style.cursor') cursor: string = 'pointer';
}

app.component.html:
<div (click)="onClick()">Button</div>

这是一个 Stackblitz demo