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

Question

我想将相同的事件绑定(bind)到组件中包含特定类的所有 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> 的 ng-containers

Answer 1

如果元素都将共享一组共同的需求(某个类和监听器)，您可以创建一个封装这些需求的指令并将该指令直接添加到元素中。这是 good article关于指令选择器类型(第 3 节是关于类选择器)
关于使用选择器自动执行此操作....您还尝试定位 MatTable 中的元素<span contenteditable..> .我很确定 Angular 指令中的选择器不能跨越元素边界，例如不能以特定匹配元素的子元素为目标。您可能需要使用 querySelectorAll处理这个
虽然它被认为是 不好的做法恢复使用 querySelector在 Angular 中， Angular 团队在需要时自己做 :

Angular Material Table

Angular Material - Google Maps Component

Angular CDK - Drag and Drop

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