javascript - Angular:委托(delegate)模式。在 ngFor 内部优化处理程序的方法

Question

例如:我需要输出一个列表。每个项目都会有一个(点击)处理程序，其中包含项目对象(如参数)。

<ul>
    <li *ngFor="let item of myList">
          <button (click)="clickHandler(item)"></button>       
    </li>
</ul>

这个列表会经常动态更新:我会在 Scroll 上加载新项目，或者通过搜索过滤列表。

Angular 为每个项目添加一个事件监听器!

问题:

列表中可以有很多项，所以会有很多eventListener一直连接和断开。

有没有办法应用委托(delegate)模式让只有一个 eventListener 事件？

Answer 1

您可以使用 trackBy 来提高性能。

app.component.html

<ul>
    <li *ngFor="let item of myList; trackBy: trackByFn">
          <button (click)="clickHandler(item)"></button>       
    </li>
</ul>

应用程序组件.ts

trackByFn(index, item) {
    return index; // or item.id
}

Angular 可以根据唯一标识符跟踪添加或删除了哪些项目，并仅创建或销毁在您更改集合时更改的项目。

您还可以深入研究 JS 中的事件委托(delegate)。

Event delegation