綁定單擊處理程序動態創建的DOM元素

Question

在我的離子2應用程序，我有這個代碼的模板：

<div class="body" [innerHTML]="ticket.Body | safeHtml"></div> 

的身體是從遠程API返回的HTML。該HTML可以包含圖像。我想在這些圖像上綁定一個「click」事件處理程序，以便在用戶點擊它們時可以在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解析對象。

<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> 

最有可能第一個解決方案可能會爲你工作，如果你不能改變遠程API從html到JSON/objects響應（如果它不是由你來實現）。