Question

我想为所有已定义cursor:pointer处理程序（或绑定到点击事件）的元素添加(click) css样式。我相信在AngularJS上可以使用[ng-click] { ... }定义一个css，Angular2 / 4有类似的解决方法吗？

Answer 1

1）如果要为具有(click)处理程序的所有元素添加一些行为，可以创建如下指令：

@Directive({
  selector: '[click]',
  host: {
    'style': 'cursor: pointer' // or class
  }
})
export class ClickableDirective {}

<强> Plunker Example

2）要捕获具有click处理程序的所有元素，我将覆盖EventManager

import { Injectable, Inject, NgZone }      from '@angular/core';
import { EventManager, EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';

@Injectable()
export class MyEventManager extends EventManager {
  constructor(@Inject(EVENT_MANAGER_PLUGINS) plugins: any[], private zone: NgZone) {
    super(plugins, zone);
  }

  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
    if(eventName === 'click') {
      element.style.cursor = 'pointer'; // or add class
    }

    return super.addEventListener(element, eventName, handler);
  }
}

<强> app.module.ts

  ...
  providers: [
    { provide: EventManager, useClass: MyEventManager }
  ]
})
export class AppModule {

<强> Plunker Example

Answer 2

如果我理解正确，将[style.cursor]="'pointer'"添加到元素应该可以解决问题。

但是添加“可点击”类并在样式表中定义以下内容可能更好：

.clickable { cursor: pointer; }

据我所知，Angular在添加(click)时不会在元素的HTML上添加任何内容。

捕获Angular2中的所有可点击元素？

2 个答案: