Bind Click-Handler, um dynamisch erstellte DOM-Elemente

Question

In meinem Ionic 2 app Ich habe eine Vorlage mit diesem Code:

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

Der Körper ist HTML, die von einem Remote-API zurückgegeben wird. Dieser HTML-Code kann Bilder enthalten. Ich möchte einen "Klick" -Ereignishandler an diese Bilder binden, damit ich sie in einem InAppBrowser öffnen kann, wenn ein Benutzer auf sie tippt.

Was wäre der beste Weg, das zu tun?

Angular 4.1.3, Ionic 3.3.0

Answer 1

Lösung 1

Versuchen Bindung ein Event auf dem Mutter geklickt Zielelemente zu erfassen.

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

---

Lösung 2

können Sie auch versuchen, Ihre Ergebnisse (Bilder) in der Ansicht mit ngFor Schleife und binden ein Ereignis auf dem Bild selbst .

Angenommen, ticket ist ein JSON-Objekt, das von der Remote-API abgerufen wurde.

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

Wahrscheinlich die erste Lösung könnte für Sie arbeiten, wenn Sie nicht in der Lage sind html-JSON/objects die Antwort des Remote API zu ändern (wenn es nicht von Ihnen umgesetzt wird).