时间戳

首页 > 解决方案 > 角度：动态事件

angular - 角度：动态事件

问题描述

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

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

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

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

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

标签： angular

解决方案

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 ele = '<button>click me</button>';
  this.elRef.nativeElement.querySelector('button').addEventListener('click', 
  this.methodName.bind(this));
  info.setInfoContentHTML(ele);
}

public methodName(){

      console.log('event called');
    }

推荐阅读