event.targetをAngular 2のオブジェクトとして取得する方法は？

Question

まず、私の不足している英語には申し訳なく思っています。

。

.do-not-click-here以外の場所をクリックするとコードを書きたい場合は、myFunction()に電話してください。

私は以下のようなコードを書いた。

document.addEventListener('click', (event) => { 
    if(event.target.classList.includes('do-not-click-here')) { 
    myFunction(); 
    } 
) 

このコードはエラーを返します。 "プロパティ 'classList'が 'EventTarget'タイプに存在しません。"

。

私はconsole.logでデバッグを試みました。

。

Iはconsole.log(event);

enter image description here

を試みたJavaScriptオブジェクトとしてevent.targetを受けました。 （私が欲しい）

。

Iはconsole.log(event.target);

enter image description here

を試み要素としてevent.targetを受信し（？）。したがってevent.target.classListは機能しません。 （多分）

。

event.target.classListの入手方法は？

私が望んだよりも良い方法がありますか？

Answer 1

<button (click)="onClick($event)">click</button> 

export class Component{ 


onClick(event){ 
    if(event.target.classList.contains('do-not-click-here')) { 
    myFunction(); 
    } 
} 
} 

Answer 2

document.addEventListener('click', (event) => { 
    if(event.target.classList.contains('do-not-click-here')) { 
    myFunction(); 
    } 
) 

使用contains代わりincludes

Answer 3

他の回答これはちょうどより多く-角度スタイルの選択肢である、良いです。どのようなコンポーネントでも、次のようにグローバルクリックリスナーを作成できます。

@HostListener('document:click', ['$event']) 
onClick(event: MouseEvent) { 
    // cast the target to prevent errors; 
    var element = event.target as HTMLElement; 
    if(element.classList.contains('do-not-click-here')) { 
     myFunction(); 
    } 
}