angular - 从 DOM 元素获取 ComponentRef

Question

已经回答了如何从 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 here

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

发现和尝试:

我找到了一个 solution for the jquery-ui-draggable plugin , 但这个技巧在这里不起作用，至少对于要放置的目标而言是这样。

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

我刚刚想过手动搜索我的组件:在 DOM 节点中循环，计数找到位置，并从组件列表中找到相同位置的组件，但它很难看...

欢迎就此提出任何建议。感谢阅读!

Answer 1

这可以使用 ElementProbe API 来实现.它主要用于调试/Protractor 集成，类似于 Angular 1 中的 element.scope()。

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

例如，这是获取当前事件目标的组件实例的方法:

ng.probe(event.target).componentInstance

Updated Plunker showing this is action

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