Angular 5：在动态附加的 HTML 块上获取点击事件答案

【问题标题】：Angular 5: Get click event on dynamically appended HTML blockAngular 5：在动态附加的 HTML 块上获取点击事件
【发布时间】：2018-05-19 15:40:39
【问题描述】：

这是我的代码：https://angular-gcmti7.stackblitz.io

在左侧，我有帮助生成 HTML 布局的网格模式。这些图案必须拖到空白面板上。

我在触发元素上生成的菜单上的点击事件时遇到问题。我必须将动态菜单附加到动态生成的 HTML 块中。根据选择，它们的数量可以是 N。

我已经尝试了这些，但没有工作： 1) 菜单//选择器的子组件渲染是静态附加的。 2) 直接 HTML 渲染 // HTML 块静态附加。

请建议一种方法让点击事件在这些菜单图标上起作用。

【问题讨论】：

哪个.ts 文件？你能分享更多代码吗？
请在使用 '`' 时使用 ${variableName}。
@Prachi 你想在功能上实现什么？
为什么要在组件中生成html/DOM？只需在您的模板中编写此代码，然后使用 ngIf 附加或不附加到 DOM。
你应该看看这里medium.com/front-end-hacking/…创建组件而不是这个“原始html”并动态加载它们

标签： jquery html angular

【解决方案1】：

您的逻辑似乎与常规的 Angular 开发有点不同。花了将近一天的时间为您尝试解决方案，但我没有提供确切的解决方案，但希望我的以下发现可以帮助您。

ComponentFactoryResolver 的 resolveComponentFactory 方法接受 Angular 组件。
一篇关于动态 HTML 注入的文章 https://medium.com/@caroso1222/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6
在您的情况下，您将 HTML 注入到您的模板中，而不是组件中。要注入 HTML，请将其保存在变量中并使用 DomSanitizer 对其进行清理或绕过安全检查

这可能会对你有所帮助。

export class main_page{

data: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}      

  ngOnInit(){ 
    this.getDynamicREST().then((res)=> {
        this.data = this.sanitizer.sanitize(res);
        /* OR */
        this.data = this.sanitizer.bypassSecurityTrustHtml(res);
    })
  };
}

然后，在您的模板中：

<div class="top">
  <div [innerHtml]="data"></div>
</div>

【讨论】：

那个链接有帮助。谢谢。