Onclick 事件添加了动态创建的按钮在 InnerHTML 中不起作用答案

【问题标题】：Onclick event added dynamically created button not working in InnerHTMLOnclick 事件添加了动态创建的按钮在 InnerHTML 中不起作用
【发布时间】：2019-03-26 07:36:28
【问题描述】：

我从服务器获取 HTML 字符串。在 HTML 字符串中，我添加了一个带有 Id、Text 和 onclick 事件的按钮并设置为 innerHTML。在 UI 上，按钮是使用 Id 和 Text 创建的，但 Onclick 事件在 Angular 6 中不起作用。

尝试过的解决方案：

在模板上创建了一个带有按钮的指令，并在动态 html 中附加了指令
创建了一个组件，模板上的按钮将组件附加到动态 HTML 中

在上述两种情况下，按钮都已创建，但事件侦听器不起作用。

我用谷歌搜索了很多，找不到一个可行的例子或具体的解决方案来提供

感谢任何解决方案

【问题讨论】：

我并不是说这是不可能的，但您不应该在 Angular 组件中加载动态 HTML。您可以通过使用编译器等来使其工作，但这意味着您必须将编译器包含在您的 AOT 构建项目中。您应该找到另一种获取 HTML 的方法（最好在构建期间），或者另一种处理点击的方法
嗨@PierreDuc 感谢您的回复.. 能否请您提供示例代码或如何将事件与动态 HTML 关联的过程。

标签： typescript angular6 innerhtml dom-events dynamic-html

【解决方案1】：

Angular 不处理 [innerHTML]="..."

添加的 HTML

所以你可以像这样处理你的点击事件。

elementRef.nativeElement.querySelector('button').addEventListener(...)

【讨论】：

我尝试了下面的代码..它也没有工作......this.elRef.nativeElement.querySelector('button').addEventListener('click', this.showname.bind(this));