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

Question

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

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

我正在使用 mapQuest API 来渲染 map 。该 map 将绘制地理编码并添加滚动内容。要添加翻转内容，我使用 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 都不会再次编译，并且绑定(bind)将被忽略。

您可以使用以下内容:

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