如何从html元素转到角度组件实例？

Question

我想找出创建html元素背后的哪个底层Angular组件实例。

我需要捕获各种鼠标和触摸事件，但由于创建了很多实例（10k +），我希望仅捕获父级别的事件（性能），然后扣除源组件的实例来自event.target。

基本上，它与Augury具有相同的功能，您可以在其中指向并单击任何html元素，并查看它来自哪个组件实例。

我非常感谢你提供任何帮助。

Answer 1

在调试模式下，Angular应用程序可以使用ng.probe - 这正是tools like Augury do。出于性能原因，ng.probe所需的元数据在生产版本中不可用，据我所知，这意味着您必须自己跟踪元素到组件的映射。

为了自己跟踪元素到组件的映射，我能想到的最简单（尽管绝对不是最节省内存的）选项是定义一个自定义渲染器来维护这个映射 - Angular自己的{{3}可以作为灵感。