如何将cursor-pointer属性应用于(click)事件处理程序？

9 浏览
0 Comments

如何将cursor-pointer属性应用于(click)事件处理程序？

我们的代码库中有很多类似这样的冗余类。我正在寻找一种方法，在任何出现(click)事件处理程序的情况下应用cursor pointer属性。

在Angular 2之前，您可以将CSS应用于Angular属性，但现在不再可能了。参考Change the mouse pointer on ngclick

[ng-click]{
    cursor: pointer;
}

0

1 答案

0 Comments

问题的出现原因：用户想要将鼠标指针的样式应用到(click)事件处理程序中，但不清楚如何实现。

解决方法：可以创建一个指令，选择所有具有(click)绑定的元素并应用样式。

click.cursor.directive.ts:

import { Directive, HostBinding } from '@angular/core';
@Directive({
  selector: '[click]'
})
export class ClickCursorDirective {
  @HostBinding('style.cursor') cursor: string = 'pointer';
}

app.component.html:

Button

你可以在html中如何使用这个指令？

不，你只需要有一个(click)绑定。我也添加了一个stackblitz的示例。

谢谢，这正是我所需要的！

0