从DOM元素获取ComponentRef
已经回答了如何从Angular 2组件获取DOM元素： ComponentRef.location.nativeElement （ComponentRef.location给出了可直接访问DOM的ElementRef）。
但是如何做相反的事情，即当我只有本地DOM对象时，获取对ComponentRef的引用？
当我尝试使用interact.js拖动/放置Angular 2组件时，就遇到了这种情况。 该库使用回调函数来通知哪个元素被拖动，以及我们试图拖放哪个元素。 提供了一个event对象，我发现的唯一有用的信息是DOM元素（ target属性）。
例：
interact('my-component-tag').draggable({
// ...
onstart: function (event:any) {
var dom = event.target; // ref to the <my-component-tag> tag
// How to find the Angular ComponentRef object here?
}
// ...
}).dropzone({
// ...
ondragenter: function (event:any) {
var targetDom = event.relatedTarget; // targeted <my-component-tag> tag
// Same question here,
// to identify where we want to insert the dragged element.
}
// ...
});
Plunker在这里
您可以检查src/Interactjs.ts的处理程序。 打开控制台查看关联的日志并将组件拖放到另一个组件上。 我有关于DOM的元素的信息，但我想要Angular组件，让我们来说说访问count属性。
调查结果和尝试：
我找到了jquery-ui-draggable插件的一个解决方案，但是这个技巧在这里不起作用，至少对于放弃的目标。
还有关于如何在DOM中插入的主题，讨论DomAdapter，但是我还没有找到任何似乎有助于从DOM到Angular组件参考的方法。
我只是想过对我的组件进行手动搜索：在DOM节点中循环，计数以找到位置，并从组件列表中的相同位置到达组件，但它非常难看...
任何意见都是值得欢迎的。 谢谢阅读！
这可以使用ElementProbe API来实现。 它主要用于调试/量角器集成，类似于Angular 1中的element.scope() 。
为了使用这个API，你需要在你的bootstrap()调用中包含ELEMENT_PROBE_PROVIDERS 。 您将可以通过调用全局ng.probe()来获取任何组件实例。
例如，以下是如何获取当前事件目标的组件实例：
ng.probe(event.target).componentInstance
更新的Plunker显示这是行动
您可以在这里看到ElementProbe API的实际实现。
链接地址: http://www.djcxy.com/p/30485.html