Alle anklickbaren Elemente in Angular2 fangen?

Question

Ich möchte einen cursor:pointer css-Stil zu allen Elementen hinzufügen, die (click)-Handler definiert haben (oder binde auf Click-Ereignisse). Ich glaube, dass auf AngularJS war es möglich, eine css mit [ng-click] { ... } zu definieren, gibt es eine ähnliche Problemumgehung für Angular2/4?

Answer 1

1) Wenn Sie ein bestimmtes Verhalten auf alle Elemente hinzuzufügen, die (click) Handler haben Sie Direktive wie erstellen:

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

Plunker Example

2) fangen alle Element- Das hätte click Handler ich würde überschreiben 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

Wenn ich richtig verstanden habe, sollte das Hinzufügen [style.cursor]="'pointer'" zu dem Element den Trick tun.

Aber es könnte eine besser sein, eine ‚klickbaren‘ Klasse hinzufügen und in Ihrem Stylesheet folgenden definiert:

.clickable { cursor: pointer; }

Von dem, was ich sagen kann, Angular fügt nichts auf das Elemente des HTML beim Hinzufügen von (click).