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

【问题标题】：Adding a click event to a dynamically created html element using angular2使用 angular2 向动态创建的 html 元素添加点击事件
【发布时间】：2017-08-15 10:54:41
【问题描述】：

我正在尝试向动态创建的 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 本身中绑定 click 事件，这对我也不起作用。有什么想法吗？

【问题讨论】：

我建议使用 *ngFor 来创建动态 html 元素，让 Array 说 list 并更新 list 将创建动态 html 元素.

标签： javascript angular typescript

【解决方案1】：

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

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

注意：Angular2 不鼓励直接 DOM 访问，而且它不是对 aot 友好的代码。

【讨论】：

@Ichorville 没问题 :-) 我仍然想告诉你，如果可以的话，你应该像 JayakrishnanGounder 描述的那样以有角度的方式创建 html 元素。但是，我知道在某些情况下我们不得不使用这种代码。
我正在尝试实现多重搜索选择方案，当我单击其中一个搜索结果时，它显示为已选中，并且上面的单击事件是删除选定的选择。由于多个结果是通过单独的按钮单击动态添加的，这就是我考虑使用当前实现的原因。我会试试你和 JayakrishnanGounder 提到的。

【解决方案2】：

您可以执行以下操作：

组件端

list: Array<model> = new Array<model>();

HTML 端

<div *ngFor="let item of list">
    //your html code//                               
</div>

修改列表会影响你的html视图。

希望对你有帮助！！

【讨论】：

我会试一试的！谢谢:)