如何在角度中利用事件冒泡答案

【问题标题】：How to make use of event bubling in angular如何在角度中利用事件冒泡
【发布时间】：2019-08-09 15:26:59
【问题描述】：

在 Jquery 中添加了单个事件监听器到 <ul>，这样我就可以通过事件冒泡监听当前 li 上的事件。

<ul>
 <li>a</li>
 <li>b</li>
 <li>c</li>
 <li>d</li>
</ul>

请建议如何在角度实现相同。我正在尝试以下方式：

1) 我只能通过 $event.target 获取选定的列表元素，但无法获取绑定到列表的数据

<ul (click)="onListClick($event)">
    <li *ngFor="let data of [1, 2, 3, 4]"></li>
</ul>

2) 我可以在点击监听器中获取绑定到列表的数据，因为我是直接点击 li 上的事件

<ul>
    <li (click)="onListClick(data)" *ngFor="let data of [1, 2, 3, 4]"></li>
</ul>

注意： 我的目标是减少事件侦听器，所以我将事件绑定到<ul> 标签而不是<li>，但我必须找到将<li> 数据获取到<ul> 点击侦听器的方法。

【问题讨论】：

您可以尝试这样做：[attr.data-target]="data" 我的问题是您尝试过$event.target.value 吗？给元素设置数据，并尝试通过相同的属性来提取。
理想情况下，您应该首先在组件中包含data，然后将其绑定到您的ul。
我的目标是减少事件监听器..为什么？这似乎毫无意义？正确的做法是点击<li>，因为这就是您点击的内容。点击<ul>没有任何好处？
@Liam 如果我们有 100 个列表项，那么我有 100 个单击事件侦听器，这将导致性能问题，所以我想在
- 使用 100 个单击侦听器>，如果我错了，请纠正我们
事件监听器的开销很小。除非您有证据证明这是一个性能瓶颈，否则这是过早的优化 (the root of all evil)。我想说你更大的问题是谁想在屏幕上看 100 里！

标签： angular typescript

【解决方案1】：

您可以使用属性绑定语法来设置列表项的值

<ul (click)="onListClick($event)">
    <li *ngFor="let data of [1, 2, 3, 4]" [value]="data">{{data}}</li>
</ul>

onListClick(event) {
   console.log(event.target.value);
}

【讨论】：

根据您对原始值的建议，它工作正常，但当数据为对象时不起作用。请查找 stackblitz 示例：stackblitz.com/edit/bubbling-angular?file=src/app/…
我假设你可以使用索引li *ngFor="let data of employees; let i = index" [attr.data-value]="data" [value]="i">{{data.name}}</li>