バインドクリックハンドラを動的に私はこのコードのテンプレートを持っている私のイオン2のアプリではDOM要素

Question

を作成します。そのHTMLはイメージを含むことができます。これらの画像に「クリック」イベントハンドラをバインドして、ユーザーがそれらをタップするとInAppBrowserで開くことができます。

これを行うにはどうすればよいでしょうか？

角度4.1.3、3.3.0イオン

Answer 1

ソリューション

1がクリックされたターゲット要素をキャプチャするために、親へのイベントを結合してみてください。

// HTML file 
<div class="body" [innerHTML]="ticket.Body | safeHtml" (click)="bodyDivClick($event)" > 
</div> 

// TS file 
bodyDivClick(event) { 
    // Check if the clicked target is an Image element. 
    // You can also check by css class name for specific image elements. 
    if (event.target && event.target.tagName === 'IMG') { 
     let imageElem = event.target; 

     console.log('Image clicked'); 
    } 
} 

---

ソリューション2

また、ビューにループへngFor検索結果（画像）を使用して試してみて、画像自体にイベントをバインドすることができます。

ticketは、リモートAPIから取得されたJSON解析オブジェクトであると仮定します。あなたが（それはあなたによって実装されていない場合）htmlからJSON/objectsへのリモートAPIの応答を変更することはできません場合

<div class="body"> 
    <div *ngFor="let imageUrl of ticket.images; let i = index;" class="image-container" > 
     <img src="{{imageUrl}}" class="image-style" (click)="imageClick()" /> 
    </div> 
</div> 

おそらく最初のソリューションは、あなたのために働くかもしれません。