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

Question

我正在构建一个角度 2 的应用程序。我想向动态添加的 html 元素添加一个点击事件。我定义了一个字符串 (contentString)，在这个字符串中我定义了 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;

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

单击它应该控制台日志

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

但这是行不通的。任何人的解决方案？

原文由 user7592304 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议