捕獲Angular2中的所有可點擊元素？

我想爲所有具有(click)處理程序定義的元素（或者具有綁定到單擊事件）添加cursor:pointer css樣式。我相信在AngularJS上可以使用[ng-click] { ... }來定義一個css，Angular2/4有沒有類似的解決方法？捕獲Angular2中的所有可點擊元素？

來源

2017-04-18 Yuvals

有一個簡單的方法來找出：添加'（點擊）'處理程序，檢查所呈現的元素，看看HTML上有任何獨特的屬性。 –

我認爲這沒有幫助，我只是檢查我的angular2應用程序和（點擊）沒有出現在DOM中。所以你不能用簡單的CSS來做到這一點。 – Leguest

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

來源

2017-04-19 05:17:51 yurzui

性能呢？它如何影響大型系統？ – Yuvals

當處理程序被添加到'click'事件時，我看不到任何設置樣式'cursor：pointer'的問題。 – yurzui

如果我理解正確，將[style.cursor]="'pointer'"添加到元素應該有所訣竅。

但它可能是一個更好的添加「點擊」級，並具有以下樣式表中的定義：

.clickable { cursor: pointer; }

從我可以告訴，角度不添加任何東西到元素HTML時添加(click)。

來源

2017-04-18 20:51:54

是的，可點擊類是顯而易見的方式。但是我正在尋找一種方法來捕獲所有（當前）可點擊的元素而不用重構項目。 – Yuvals

捕獲Angular2中的所有可點擊元素？

回答

相關問題