Angular 4：[innerHTML] 中的点击事件

Question

经过大量搜索后，我试图找到一种简单的方法来执行一个方法，当点击保存在数据库中的动态创建的 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>'

在我的 HTML 文件中，我有：

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

我知道这是 Angular 的设计，但必须有一种相当简单的方法来做到这一点。我不是 Angular 专家，需要一些帮助！谢谢

Answer 1

假设您的 html 具有类似 的链接<a href="/home">home</a>，您可以在容器上绑定 (click) 事件并从内部动态添加的元素中捕获任何冒泡的点击：

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

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