javascript - 使用angular2向动态创建的html元素添加点击事件

Question

我正在尝试向动态创建的 html 元素添加点击事件，目前代码如下。

let parameterLabels = document.getElementById('parameterLabels');

    p_meter.classList.add('active', 'filtered');
    parameterLabels.innerHTML += `
        <a id="label_${parameter.name}" class="ui label transition animating scale in" 
            data-value=${parameter.name}>${parameter.name}<i id="remove_${parameter.name}" class="delete icon"></i></a>`;

    document.getElementById(`remove_${parameter.name}`).addEventListener('click', () => {
        this.removeParameter(`${parameter.name}`);
    });

目前我通过 addEventListener 分配点击事件，但它只对创建的元素有效。如果我继续创建新的动态元素，则只有最新的点击事件有效，而以前创建的元素的点击事件无效。有没有办法像 angular2 (click)="removeParameter($event)" 那样在 html 本身中绑定(bind)点击事件，这对我也不起作用。有什么想法吗？

Answer 1

您可以向主体添加一个事件监听器，它将根据您指定的约束处理事件，例如:

document.querySelector('body').addEventListener('click', (event)=> {
    if (event.target.id.toLowerCase() == `remove_${parameter.name}`) {
        this.removeParameter(`${parameter.name}`);
    }
});

注意:在 Angular2 中不鼓励直接访问 DOM，这不是 aot 友好的代码。