Angular 6-向动态创建的html元素添加事件处理程序

我想将单击事件附加到动态创建的html元素。单击事件应该能够在组件中触发另一个方法

我已经看过了其他建议使用ElementRef附加事件的SO答案。但是，这对我的案子不起作用

我正在使用mapQuest API渲染地图。地图将绘制地理代码&它将添加一个滚动内容。为了添加滚动内容，我使用mapQuest的API方法，比如

info.setInfoContentHTML（'

该链接将位于弹出窗口内，当用户悬停在图标上时，插件将动态地将其添加到dom中。如何在链接上添加事件侦听器，该链接仅在用户悬停在图标上时显示&插件没有提供在显示悬停弹出窗口后可以触发的回调事件

我一直在寻找类似jQuery live的功能，它可以附加事件侦听器，尽管元素不在DOM上。
因为Angular在编译组件时会处理模板。
以后添加的任何HTML都不会再次编译，绑定将被忽略

您可以使用以下选项：

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {
  // assume dynamic HTML was added before
  this.elRef.nativeElement.querySelector('button').addEventListener('click', 
  this.onClick.bind(this));
}

您的用例：

public createElement(){

  const el = '<button>click me</button>';
  this.elRef.nativeElement.querySelector('button').addEventListener('click', 
  this.methodName.bind(this));
  info.setInfoContentHTML(el);
}

public methodName(){

      console.log('burrah!!! called');
    }

publicCreateElement（）{
const el='单击我'；
此.elRef.nativeElement.querySelector（'button'）.addEventListener（'click'），
this.methodName.bind（this））；
info.setInfoContentHTML（el）；
}
公共方法名（）{
log（'burrah！！！called'）；
}
我尝试了@programoholic的解决方案。它很有效，但我需要一些改变。

这样做之后,有两个问题是,

激发的事件可以是多个。（单击“创建按钮”并检查控制台日志）
若按钮添加了很多内容，那个么需要检查elementList的索引以添加事件侦听器
这是

btnClicked（）{
//创建波顿
let element=document.getElementById（this.uuid）；
this.buttonHtml=`BtnTest-${this.btnIndex++}`；
element.innerHTML=element.innerHTML+this.buttonHtml；
//在添加按钮之后，通过“querySelectorAll”获取元素列表。
让elementList=this.elRef.nativeElement.querySelectorAll（'button'）；
//添加每个事件处理程序。
elementList[0]。addEventListener（'click'，this.btnCellClick1.bind（this））；
elementList[1].addEventListener（'click'，this.btnCellClick2.bind（this））；
}
b取消单击1（）{
console.log（'btn单击1'）；
}
b取消单击2（）{
console.log（'btn Click 2'）；
}
基本上地图准备就绪。所有地址都位于地图上。但是，每当用户悬停在任何pin上时，悬停时出现的弹出窗口将动态添加到dom中。我的链接在该弹出窗口中。抱歉，我现在没有实时链接。您是将动态html添加为字符串还是添加到文档对象？您如何分配事件？我创建一个HTML元素，在
info.onclick=function（）{}
之后。例如
info
是我的HTML元素。一旦映射就绪，信息存在但不显示，绑定事件工作。如果您让我知道如何创建
info
的var info=new MQA.Poi（{lat 39.743943，lng:-105.020089}），那会很有帮助'像这样。这是一个插件方法。我尝试了这个方法。我使用了锚链接的类名来代替button。它没有触发事件。这里的一件事是，在ngAfterViewInit事件处理期间，我的链接不会出现在DOM上。当用户将鼠标悬停在地址pin上时，插件会动态添加链接。@Jay button是元素名而不是类。@您可以将这段代码放入一个方法中，并在创建元素后调用。元素由插件动态创建。插件的配置接受特定事件发生时显示的html字符串数据。是的，我正在将字符串传递给插件。插件创建悬停弹出窗口。