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

Question

我想向所有定义了 (click) 处理程序(或绑定(bind)到点击事件)的元素添加一个 cursor:pointer 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