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

How to add click event to dynamically added html element in typescript(如何将点击事件添加到打字稿中动态添加的html元素)

本文介绍了如何将点击事件添加到打字稿中动态添加的html元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在用 Angular 2 构建一个应用程序.我想将点击事件添加到动态添加的 html 元素中.我定义了一个字符串(contentString)，在这个字符串中我定义了html元素.

I'm building an app in angular 2. I want to add a click event to a dynamically added html element. I define a string (contentString), and in this string I define the html element.

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

这个字符串被放在一个像这样的html元素中:

This string is put inside a html element like this:

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

虽然当我检查元素时，它定义了点击事件，但它没有触发.

Although when I inspect the element, it has the click event defined, but it does not trigger.

点击它应该控制台日志

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

但这不起作用.有人解决吗?

But that does not work. Anyone a solution?

推荐答案

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

Angular processes the template when the component is compiled. HTML added later is not compiled anymore and bindings are ignored.

你可以使用

constructor(private elRef:ElementRef) {}

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

这篇关于如何将点击事件添加到打字稿中动态添加的html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！