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

Question

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

例子：

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

我想在 Angular 8+ 中做什么：

document.querySelectorAll(".myClass").forEach(item => item.addEventListener('click', event => myFunction(event));

这甚至可能与 Angular 一起使用吗？

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

我需要在MatTable包含一个<span contentEditable=true></span>

Answer 1

如果所有元素都共享一组通用的需求（某个类和侦听器），您可以创建一个封装这些需求的指令，并将该指令直接添加到元素中。这是一篇关于指令选择器类型的好文章（第 3 节是关于类选择器）

关于使用选择器自动执行此操作...您还尝试定位MatTable <span contenteditable..>. 我非常确定 Angular 指令中的选择器不能跨越元素边界，例如不能定位特定匹配元素的子元素。querySelectorAll您可能需要在这一问题上采用您的方法

尽管恢复在 Angular 中使用被认为是不好的做法，但 Angular 团队会在需要时自行执行此操作：querySelector

• 角材料表
• Angular Material - Google 地图组件
• Angular CDK - 拖放

注意：当您尝试删除附加了侦听器的组件时，如果带有事件处理程序的组件仍然存在，它们可能会在内存中徘徊 - 因此，如果是这种情况，请删除侦听器......或者不是