角click事件無法查看

爲了解釋什麼，我正在尋找它的最好的圖文並茂的方式jQuery的工作，你可以指定一個通用的HTML元素來監視事件：角click事件無法查看

$("label").on("click", function(event){ 
    // do stuff to this element 
});

或傳統的addEventListener

document.getElementsByTagName('label').addEventListener('click', function(event){ 
    // do stuff to this element 
});

我很驚訝地沒有看到這個解決方案在互聯網上，而是我看到很多的例子介紹如何使用事件綁定(click)="clickHandler"顯然，你不想地方處理程序在你的看法。

我可以得到一些關於如何在Angular中觀看一般事件的方向/鏈接嗎？

更新：我很欣賞聽完各處的DOM，Renderer2這將爲特定的一般要素，顯然可觀察的選項以及工作@HostListener之間的爭論。

來源

2017-05-16 BenRacicot

你要買動態附加事件？或者你只是喜歡在JS端附加事件？個人而言，我認爲角色模板語法中的事件綁定符號：'（event）'比在JS端執行所有工作更清晰，更清晰。無論如何，你可以在這裏找到你要找的東西：http://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2 –

也許如果你在不同的地方使用相同的處理程序，你可以嘗試創建一個組件 – runit

嘿@AhmedMusallam在我看來，應用事件綁定20次以上似乎是錯誤的。但'Renderer'看起來像答案，謝謝！ – BenRacicot

您可以使用Rxjs觀測和訂閱DOM事件：

var button = document.querySelector('button') 

Rx.Observable.fromEvent(button, 'click') 
    .subscribe(
    (event) => console.log(event) 
    )

來源

2017-05-16 18:30:20 Yeysides

可能不是一個好主意，建議添加事件，甚至做'document.querySelector'，除非有某種情況，並且該代碼位於'AftreViewInit'組件生命週期中。 –

它與引用者具有相同的作用，並且具有可觀察的附加好處 – Yeysides

我對Rxjs非常厭倦。這就像使用正則表達式。你用它來解決問題，然後你有兩個問題。 – cgTag

的@Output格式（(click)=""）是角的包裝器的DOM事件（如例子將是onclick）。這很重要，因爲Angular管理子組件和父組件之間的變更檢測，並使用這些@Inputs和@Outputs來執行此操作。

Angular在處理DOM api本身方面做了很多工作，我們不應該把它搞得太多。很多時候，您可以通過指令或擴展組件來處理行爲。

但是，如果你想將一些全球在運行時，你可以注入Renderer到組件：

constructor(public el: ElementRef, public renderer: Renderer) { 
    renderer.listenGlobal('document', 'click', (event) => { 
    // Do something with 'event' 
    }); 
}

注：如貶值，並將與Renderer2更換一個稍微不同的API Renderer標。

來源

2017-05-16 18:33:21 joh04667

我不知道這是可用的，謝謝！ – Yeysides

你確定angular使用虛擬DOM嗎？你能給一個鏈接來支持這個嗎？ –

經過更多研究，我可能會誤會。我很困惑它使用Shadow DOM進行造型。我編輯了我的回覆，謝謝 – joh04667

對於聲明的解決方案，如果你想整個文檔，只需一次點擊處理程序，把這個在任何組件：

@HostListener('document:click', ['$event']) 
onDocumentClick(event: MouseEvent) { 
    console.log(event); 
}

來源

2017-05-16 18:48:00 dbandstra

不錯，非常有趣 – Yeysides

我已經看到了這個，但像加入許多事件綁定的關注，導入和使用'@ HostListener'顯然監聽整個DOM或'Renderer2 '哪些聽特定元素？ – BenRacicot

HostListener僅附加一個事件偵聽器（對於您定義的組件的每個實例）。如果您希望整個應用程序使用單個事件偵聽器，然後將其放入只存在一次的組件（例如AppComponent）中。我認爲我的答案等同於joh04667的答案，只是它是一種更具說明性的風格。 – dbandstra

角click事件無法查看

回答

相關問題