从 DOM 元素获取 ComponentRef

已经回答了如何从 Angular 2 组件获取 DOM 元素：ComponentRef.location.nativeElement（ComponentRef.location 提供了可以直接访问 DOM 的 ElementRef）。

But 如何做相反的事情，即当我只有本机 DOM 对象时获取对 ComponentRef 的引用？

当我尝试使用交互.js 拖放 Angular 2 组件时，我就遇到了这种情况。该库使用回调函数来通知哪个元素被拖动，以及我们试图将其放置在哪个元素上。一个event提供了对象，我发现的唯一有用的信息是 DOM 元素（target属性）。

Example:

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.
    }
    // ...
});

笨蛋在这里

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

发现和尝试：

我找到了一个jquery-ui-draggable 插件的解决方案，但是这个技巧在这里不起作用，至少对于掉落的目标来说是这样。

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

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

欢迎对此提出任何建议。谢谢阅读！

这可以通过使用来实现元素探针 API。它主要用于调试/量角器集成，类似于element.scope()在角度 1 中。

为了使用此 API，您需要包含ELEMENT_PROBE_PROVIDERS在你的bootstrap()称呼。然后，您将能够通过调用全局来获取任何组件实例ng.probe().

例如，以下是获取当前事件目标的组件实例的方法：

ng.probe(event.target).componentInstance

更新后的 Plunker 显示这是操作

可以看到ElementProbe API的实际实现Here.