<a> tag click event inside innerhtml in angular 6

问题

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>

回答1:

You can listen to clicks on paragraph with innerHTML and then check event.target element.

来源：https://stackoverflow.com/questions/53447577/a-tag-click-event-inside-innerhtml-in-angular-6