从DOM元素获取ComponentRef

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

但是如何做相反的事情，即当我只有本地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节点的循环，算找到了位置，并达到从在同一位置的组件列表中的组件，但它是如此丑陋...

任何意见都是值得欢迎的。谢谢阅读！

来源

2015-11-19 Antoine

这可以使用ElementProbe API来实现。它主要用于调试/量角器整合，类似于element.scope()在角1

为了使用这个API，你需要包括ELEMENT_PROBE_PROVIDERS在bootstrap()通话。然后，您将可以通过调用全局ng.probe()来获取任何组件实例。

例如，这里是你怎么弄的组件实例为当前活动对象：

ng.probe(event.target).componentInstance

Updated Plunker showing this is action

你可以看到实际执行的ElementProbe API Here的。

来源

2015-12-09 09:33:19 urish

太棒了！我认为这是不可能的，谢谢！我从angular gitter group得到的建议是改变设计以使其更加符合Angular的方式。实际上，我已经迁移到完全不同的代码结构以避免操纵DOM，但您的解决方案明确地解决了我的问题中提出的问题。 – Antoine

这是否仍然存在2.0下？ – sqwk

不起作用。没有'ng' – Phill

从DOM元素获取ComponentRef

回答

相关问题