如何将点击事件添加到打字稿中的动态添加的HTML元素

我正在构建一个角度为2的应用程序。我想为点击事件添加一个动态添加的html元素。我定义了一个字符串（contentString），并在这个字符串中定义了html元素。如何将点击事件添加到打字稿中的动态添加的HTML元素

var contentString = '<b>' + this.mName + '</b><br/> ' + this.mObject.category + '<br/> Click here for more information <button (click)="navigate()">Navigate here</button>';

这个字符串把HTML元素中是这样的：

var boxText = document.createElement("div"); 
    boxText.innerHTML = contentString;

虽然当我检查的元素，它定义了click事件，但不会触发。

[image 1]

[image 2]

点击它应该控制台登录

navigate() { 
console.log("eeeehnnananaa"); 
}

但是，这并不工作。任何人的解决方案？

来源

2017-03-09 Thibault Bruggeman

你为什么不使用的角度来添加HTML？ –

@MujtabaKably你会怎么做？我不知道如何编写代码 – FerialTeut

https://stackoverflow.com/questions/36116770/angular2-catch-subscribe-to-click-event-in-dynamically-added-html/36116838#36116838 我觉得这个将解决你的问题。 –

Angular在编译组件时处理模板。稍后添加的HTML不再被编译，绑定被忽略。

您可以使用

constructor(private elRef:ElementRef) {} 

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

来源

2017-03-09 10:29:16

仅供参考 - 不知道为什么，但addEventHandler返回“不是函数”错误。使用addEventListener，效果很好！ – firas489

@ firas489非常感谢提示。那是个错误。我修好了它。 –

如何将点击事件添加到打字稿中的动态添加的HTML元素

回答

相关问题