Angular 2の特定のクラスを持つ要素にイベントをバインドする方法はありますか？

Question

クラス「foo」を持つ要素のclickイベントをリッスンする適切な方法は何ですか？

私は、このバージョンは少し壊れやすいと思い

<div> 
    <p class="foo">Hi</p> 
    <span class="foo">Hello</span> 
    <p class="bar">Hey</p> 
<div> 
<div class="foo"> 
    <img src="..."/> 
</div> 

：

<div> 
    <p class="foo" (click)="bar()">Hi</p> 
    <span class="foo" (click)="bar()">Hello</span> 
    <p class="bar">Hey</p> 
<div> 
<div class="foo" (click)="bar()"> 
    <img src="..."/> 
</div> 

Answer 1

これはテンプレートのテンプレートまたは一部である場合：

<div> 
    <p class="foo">Hi</p> 
    <span class="foo">Hello</span> 
    <p class="bar">Hey</p> 
<div> 
<div class="foo"> 
    <img src="..."/> 
</div> 

あなたはそれとバインドのための@Directive()を作成することができますイベントはhostプロパティへ：

import { Directive } from '@angular/core'; 

@Directive({ 
    selector : '.bar', // <---selects only .bar elements 
    host:{ 
     "(click)":"bar()" 
    } 
}) 

export class BarDirective{ 

    bar(){ 
     console.log('clicked'); 
    } 

} 

@HostListener()のような他のデコレータもありますが、それは@angular/coreからインポートし、代わりにクラスブロック内のイベントをバインドする必要があります。