Angular 角度4：单击[innerHTML]中的事件

经过多次搜索，我试图找到一种简单的方法来执行一个方法，即在数据库中保存的动态创建的HTML中单击一个链接。我正在为用户创建关于在消息体中嵌入了各种链接的事务的消息。我需要将消息保存在数据库中，当检索和查看时，用户应该能够单击一个链接来调用一个方法，该方法将它们路由到正确的页面

HTML的外观如下所示：

"string myHTML='<div><a (click)=method1(tranID)>Execute Method 1></a><div>
<br><br>
<div><a (click)=method2(tranID)>Execute Method 2></a><div>'

“string myHTML='Execute Method 1>



执行方法2>'

在我的HTML文件中，我有：

 <div [innerHTML]="myHtml"></div

---

假设您的html具有类似
的链接，您可以绑定容器上的（click）事件，并捕获动态添加的元素中的任何冒泡点击：

<div (click)="click($event)" [innerHTML]="html"></div>

click(evt) {
   const href = evt.target.getAttribute('href');
   if (href) {
      evt.preventDefault();
      this.router.navigate(href);
   }
}


单击（evt）{
const href=evt.target.getAttribute（'href'）；
如果（href）{
evt.preventDefault（）；
this.router.navigate（href）；
}
}
那么问题出在哪里？函数是否不执行？这类似于SQL注入攻击。通过让您能够这样做，您将同时让人们能够通过在保存的数据中添加意外代码来利用您的站点。总之，永远不要将函数另存为用户数据。找到不同的t存储数据和根据需要从数据构造HTML的方法。您不能从角度范围之外调用角度组件方法（即：动态创建的HTML）。正如@Claies所说的，这是一个设计错误，请尝试另一个更安全的数据库设计。@callback-correct。函数不正确execute@Claies-实际上是想存储页面路由。不是函数。这样做了！谢谢！太好了，np！编辑了答案，只显示（单击）这样，我认为它是最干净的：）还有一个问题：当页面最初加载动态HTML时，单击事件不会触发。如果我使用浏览器重新加载页面，重新加载（使用Chrome）将开始工作并继续工作，即使我使用不同的数据进入页面。奇怪！嗯。尝试*ngIf=“HTML“在div.Set上，当您开始加载html时，将this.html=null。如果只在加载html时初始化容器，可能会有所帮助。这不起作用。我假设代码没有编译，而重载编译它？