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

Question

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

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

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

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

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

我一直在寻找 jQuery live like 功能，尽管元素不在 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');
    }

2022 年更新。 ：

Stackblitz 演示

Answer 2

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

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

这是示例。

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');
}

Answer 3

更好的方法是自动保留“this”上下文：

this.elementRef.nativeElement.querySelector('.dynamic-anchor').addEventListener('click', () => {
  this.myComponentFunction();
});