角度2の複数の要素に対するワンクリックハンドラ

Question

内側に3つのリンクを持つdivがあるとします。 $('.wrap a').on('click', callback);：私たちは、このようになめらかに行うことができますjQueryの内のリンクのクリックハンドラを割り当てるために

<div class="wrap"> 
    <a class="link">link1</a> 
    <a class="link">link2</a> 
    <a class="link">link3</a> 
</div> 

。

Angular2の最適なアプローチは何ですか？

私が学んだことから、各リンクには簡単な（クリック）を使用できます： <a class="link" (click)="callback()">ですが、私にとっては奇妙に見えます。 もう1つのオプションは、指示文を使用して <a class="link" [directive]="value">のようなものですが、これは私がもっと好きです。

上記のケースのさらに優れた実装はありますか？私の意見で

Answer 1

クリックイベントで説明したように、バブルが親のdivまであなたが置くことができますので、有効なリンクを構成するためにディレクティブを使用し、多分インナーHTMLを解析することですイベントハンドラがそこにあります。

<div class="wrap" (click)="clicked($event)"> 
     <a id="link1" class="link">link1</a> 
     <a id="link2" class="link">link2</a> 
     <a id="link3" class="link">link3</a> 
    </div> 

export class AppComponent { 

    clicked(event: MouseEvent) { 
     console.log(event.srcElement.id); 
    } 
    } 

Answer 2

は、このための最善の方法は、here

Answer 3

実際に、それはあなたが何をしたいかに依存します。しかし、clickHandlerを割り当てたいのであれば、通常は（クリック）ディレクティブを使用します。なぜこれはあなたにとって奇妙に見えますか？

あなたがそうのようなあなたのコールバックに$event PARAMTERを渡すあなたハンドラ内ClickEventにアクセスしたい場合：<a class="link" (click)="callback($event)">link</a>

をあなたがそれを反復処理することができますリンクのコレクションを持っている場合：

public links = ['link1','link2','link3']。テンプレートで、その後

：

<div class="wrap"> 
    <a class="link" *ngFor="let link of links">{{link}}</a> 
</div> 

あなたはちょうどあなたが通常はrouterLinkディレクティブを使用して、あなたのsinglePageApplication内をナビゲートします。

<a routerLink="/my-path">link1</a> 

Answer 4

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div (click)="onClick($event)"> 
     <a id="link1" href="#" class="link">link1</a> 
     <a id="link2" href="#" class="link">link2</a> 
     <a id="link3" href="#" class="link">link3</a> 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    constructor() { 
    } 
    onClick(event) { 
     alert(event.srcElement.id); 
    } 
} 

多くの意味を作る作業Plunkr