Question

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

我已经经历过其他建议使用ElementRef附加事件的答案。但是，它不适用于我的情况。

我正在使用mapQuest API渲染地图。该地图将绘制地理编码，并将添加内容滚动。要添加过渡内容，我正在使用mapQuest的API方法，例如info.setInfoContentHTML('<a>click me</a>');

仅供参考：https://developer.mapquest.com/documentation/javascript-api/pois-infowindows/

链接将位于弹出窗口内部，当用户将鼠标悬停在图标上时，它将由插件动态添加到dom中。如何在链接上添加事件侦听器，仅当用户将鼠标悬停在该链接上且插件未提供回调事件（在显示悬停弹出窗口后便会触发）时才显示。

我一直在寻找类似jQuery的实时功能，尽管该元素不在DOM上，但仍将附加事件侦听器。

Answer 1

因为编译组件时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');
    }

Answer 2

我尝试了@programoholic的解决方案。可以，但是我需要一点点改变。
这样做之后，有两个问题，

激发的事件可能是多个。（单击“创建按钮”并检查控制台日志）
如果按钮添加了很多，则需要在elementList上检查索引以添加事件侦听器。

这里是sample。

btnClicked(){

  //create botton
  let element = document.getElementById(this.uuid);    
  this.buttonHtml = `<button>BtnTest - ${this.btnIndex++}</button>`;
  element.innerHTML = element.innerHTML + this.buttonHtml;

  //after add button, get elment list by "querySelectorAll".
  let elementList = this.elRef.nativeElement.querySelectorAll('button');

  //Add event handler each.
  elementList[0].addEventListener('click', this.btnCellClick1.bind(this));
  elementList[1].addEventListener('click', this.btnCellClick2.bind(this));
}

btnCellClick1(){
     console.log('btn Click 1');
}

btnCellClick2(){
  console.log('btn Click 2');
}

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

2 个答案: