Renderer2 使用循环将事件绑定到动态创建的元素答案

【问题标题】：Renderer2 bind event to dynamically created element using loopRenderer2 使用循环将事件绑定到动态创建的元素
【发布时间】：2019-02-07 16:23:41
【问题描述】：

我正在使用 Angular 4+，import { Component, ElementRef, Renderer2 } from '@angular/core';
我已经成功生成了一系列元素：

    const parentList = this.renderer.createElement('ul');
    let children = '';
    for(let i=0; i<totalItem; i++) {
       children += '<li id="item'+i+'">'+item.name+'</li>';
    }
    parentList .innerHTML = children;

    this.renderer.appendChild(
       this.elRef.nativeElement.querySelector('.wrapper'), 
       parentList);

使用renderer.listen，如何通过迭代将点击事件绑定到所有创建的li？
我的尝试：

for(let j=0; j<totalItem; j++) {
   let listener =
     this.renderer.listen(
        this.elRef.nativeElement.querySelector('#item'+j), 
        'click',
        (evt) => {
           this.myFunc(j);
        }
      );
}

.....

myFunc(id) {
   alert(id);
}

问题是每次点击li 都会在迭代完成后提醒j 的最新值。
我希望它为每个li 提醒不同的id。
我认为我绑定事件的方式是错误的。请帮帮我。

【问题讨论】：

您应该在 li 上使用 (click)。
在 html 字符串中写入 (click)="myFunc(i)" 时事件未绑定
您在将其添加到 DOM 之前是否对其进行了清理？
可能有更好的方法来做到这一点。顺便说一句，您到底想在这里实现什么？
@SiddharthAjmera 我想将点击事件绑定到一些动态创建的元素以触发一个函数，该函数的参数取决于点击的元素

标签： angular ionic3

【解决方案1】：

将 DOM 附加到 DOM 树后，您可以查询所有以 item id 开头的 DOM，同样，您可以使用 querySelectorAll 和 [id^="item"'] 表达式，其中表示收集所有具有属性 @987654324 的元素@ 以 item 开头。之后分别循环遍历每个元素上的集合和绑定事件。

let listItems = Array.from(this.elRef.nativeElement.querySelectorAll('*[id^="item"]'))

listItems.forEach((listItem, j) => {
    this.renderer.listen(
        listItem, 
        'click',
        (evt) => {
           this.myFunc(j);
        }
    );
})

【讨论】：

你是对的。我应该使用 querySelectorAll。谢谢