但是如何做相反的事情,即当我只有原生DOM对象时获取对ComponentRef的引用？

当我尝试使用interact.js拖放Angular 2组件时就是这种情况.该库使用回调函数来通知拖动哪个元素,以及我们尝试删除哪个元素.提供了一个事件对象,我发现的唯一有用信息是DOM元素(目标属性).

例：

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 here

您可以在src / Interactjs.ts中检查处理程序.打开控制台以查看关联的日志并将组件放在另一个组件上.我有DOM的元素信息,但我想要Angular组件,比如说访问count属性.

调查结果和尝试：

我发现了一个solution for the jquery-ui-draggable plugin,但这个技巧在这里不起作用,至少对于要放弃的目标.

还有topics关于如何在DOM中插入,谈论DomAdapter,但我还没有找到任何似乎有助于从DOM到Angular组件引用的方法.

我只是考虑对我的组件进行手动搜索：在DOM节点中循环,计数以找到位置,并从同一位置的组件列表到达组件,但它太丑了……

对此有任何建议是值得欢迎的.谢谢阅读！