<a> 角度 6 中的 innerhtml 内的标记单击事件

Posted 2023-05-07

【中文标题】<a> 角度 6 中的 innerhtml 内的标记单击事件

【英文标题】：<a> tag click event inside innerhtml in angular 6

【发布时间】：2019-04-26 02:50:51

【问题描述】：

我想开发一个具有以下功能的组件：

页面内容可以加载innerhtml，即动态数据。 当我mouseoverdiv 时，它必须显示一些图标才能编辑。 单击图标会触发一个事件。我无法让标签内的点击事件起作用。

（为 innerhtml 加载的这个 html）

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

【问题讨论】：

您的问题不清楚。你在做什么，确切地说，你期望发生什么，而不是发生什么？你的问题是和innerHTML有关，还是和(click)="changeEditor(TEXT)"有关？

感谢重播。我只能使用动态 html 内容。因为它用于模板设计。你能推荐一些其他插件或如何以另一种方式实现吗？这会很有帮助。

您可能想尝试通过Dynamic Components 实现这一目标。

你没有做我在评论中要求你做的任何事情。你在做什么，确切地说，你期望发生什么，而不是发生什么？您的问题与 innerHTML 有什么关系，还是与 (click)="changeEditor(TEXT)" 有关系？

问题是，点击我。单击时它正在调用 ts 文件中的函数。但是当通过 [innerHTML] 加载时它不会调用。事件未触发。但 href 正在工作。

【参考方案1】：

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