角度クリックイベントでは、それはあなたがイベントを監視するために、一般的なHTML要素を指定することができますjQueryの仕組み示す最高だために私が探しているものを説明するために

Question

を表示できない：

$("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"を結合イベントを使用する方法の例の多くを参照してください。

ジェネリックイベントをアングルで見る方法については、いくつかの方向/リンクを得ることができますか？

UPDATE： @HostListener DOM全体を聞いて、Renderer2という特定の一般的な要素と明らかにObservableオプションで動作するかどうかの議論がありがたいです。

Answer 1

あなたはRxjsの観測を使用して、DOMイベントにサブスクライブすることができます

var button = document.querySelector('button') 

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

Answer 2

@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' 
    }); 
} 

注：減価償却とは若干異なるAPIでRenderer2に置き換えられますようRendererがマークされています。

Answer 3

宣言型のソリューションについては

あなたは文書全体のための単一のクリックハンドラは、任意のコンポーネントでこれを入れたい場合：

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