Question

在我的Ionic 2应用程序中，我有一个带有此代码的模板：

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

正文是从远程API返回的HTML。该HTML可以包含图像。我想在这些图像上绑定一个“click”事件处理程序，以便我可以在用户点击它们时在InAppBrowser中打开它们。

最好的方法是什么？

Angular 4.1.3，Ionic 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（如果是这样的话），则第一个解决方案很可能适用于您你没有实施。）

将单击处理程序绑定到动态创建的DOM元素

1 个答案: