角度-如何通过选择器将事件绑定到HTML元素？

Question

我想将同一事件绑定到组件中包含特定类的所有HTML元素

示例：

div

我想在Angular 8+中做什么：

<span class="myClass">Item1</span>
<span class="myClass">Item2</span>
<span class="myClass">Item3</span>

使用Angular还能做到吗？

我进行了一些搜索，但没有找到我真正需要的东西。

我需要在包含document.querySelectorAll(".myClass").forEach(item => item.addEventListener('click', event => myFunction(event)); 的{​​{1}} ng容器内执行此操作

Answer 1

如果所有元素都共享一组公共要求（某个类和侦听器），则可以创建一个封装这些要求的指令并将该指令直接添加到元素中。这是关于指令选择器类型的good article（第3节是关于类选择器的信息）

关于使用选择器自动执行此操作。...，您还试图定位MatTable <span contenteditable..>中的元素。我很确定Angular指令中的选择器不能跨越元素边界，例如无法定位特定匹配元素的子元素。您可能需要为此使用querySelectorAll方法

虽然在Angular中恢复使用querySelector被认为是不好的做法，但 Angular团队会在需要时自行完成：

• Angular Material Table
• Angular Material - Google Maps Component
• Angular CDK - Drag and Drop

注意：当您尝试删除连接了侦听器的组件时，如果带有事件处理程序的组件仍在内存中，它们可能会在内存中徘徊-因此，请删除侦听器。 ...还是不?