Angular 从DOM元素获取ComponentRef

如何从Angular 2组件获取DOM元素已经得到了回答：

ComponentRef.location.nativeElement

（ComponentRef.location提供了直接访问DOM的ElementRef）

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

当我尝试使用interact.js拖放Angular 2组件时，我遇到了这种情况。该库使用回调函数来通知拖动了哪个元素，以及我们试图删除哪个元素。提供了一个

事件

对象，我找到的唯一有用的信息是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.
    }
    // ...
});

interact（'my-component-tag'）。可拖动({
// ...
onstart:函数（事件：任意）{
var dom=event.target；//引用标记
//如何在此处找到角度分量ref对象？
}
// ...
}).dropzone({
// ...
ondragenter:函数（事件：任意）{
var targetDom=event.relatedTarget；//目标标记
//同样的问题，
//以确定要在何处插入拖动的元素。
}
// ...
});

您可以在

src/interacticjs.ts

中检查处理程序。打开控制台以查看相关日志，并将一个组件放到另一个组件上。我有DOM中元素的相关信息，但我希望使用角度组件，比如访问

count

属性

发现和尝试：

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

我找到了一个，但是这个技巧在这里不起作用，至少对于目标来说是不可能的

也有关于如何在DOM中插入的内容，也有关于DomAdapter的内容，但是我还没有找到任何方法可以帮助从DOM到角度组件引用

我只是想手动搜索我的组件：在DOM节点中循环，计数以找到位置，然后从组件列表中的相同位置到达组件，但这太难看了

---

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

这可以通过使用。它主要用于调试/量角器集成，类似于Angular 1中的

element.scope（）

为了使用此API，您需要在

bootstrap（）

调用中包含

ELEMENT\u PROBE\u PROVIDERS

。然后，您可以通过调用全局

ng.probe（）

获取任何组件实例

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

ng.probe(event.target).componentInstance

---

您可以看到ElementProbe API的实际实现。

我必须这样做。我能够通过在“父”组件类中使用@ViewChildren的组合并在“子”组件本身上设置唯一标识符来完成它

因此，如果它是父组件，则您有：

@ViewChildren(YourChildComponent)
elements: QueryList<YourChildComponent>;

现在，您可以访问您的孩子并通过标识符将他们匹配，如下所示：

private findElementByNativeDOMObject(el: any) : YourChildComponent{


let uniqueId = el.attributes.getNamedItem('unique-id').value;
if ( ! uniqueId)
  return null;

// ok, let's go through our children
return this.elements.find( x=> x.UniqueID == uniqueId);

---

}

太棒了！我认为这是不可能的，谢谢！我从angular gitter group得到的建议是改变设计，使其更具棱角感。实际上，我已经迁移到一个完全不同的代码结构，以避免操作DOM，但您的解决方案显然解决了我问题中提出的问题。在2.0中是否仍然存在这种情况？