<a> tag click event inside innerhtml in angular 6

Question

I want to develop a component with the following features:

1. Page content can load with innerHTML i.e. dynamic data.
2. When I mouseover the div, it has to show some icon to edit.
3. Clicking on the icon fires an event. I can't get click event inside tag to work.

(this html loaded for innerhtml)

<div class="profile-pic">
  <img src="https://c1.staticflickr.com/5/4023/5154094149_8c1345f634.jpg">
  <div class="edit" style="background: #7d7c7c; border: 1px solid; width: 100%; text-align: center;">
    <a href="javascript:void(0)" (click)="changeEditor(TEXT)">Click me</a>
  </div>
</div>
<p [innerHTML]="content | safeHtml"></p>

Answer 1

您可以使用innerHTML收听对段落的点击，然后检查event.target元素。