从DOM元素获取ComponentRef [英] Get ComponentRef from DOM element

问题描述

已经回答了如何从Angular 2组件中获取DOM元素:ComponentRef.location.nativeElement(ComponentRef.location提供了可以直接访问DOM的ElementRef).

It has already been answered how to get the DOM element from an Angular 2 component: ComponentRef.location.nativeElement (ComponentRef.location gives the ElementRef that gives a direct access to DOM).

但是如何做到相反，即当我只有本地DOM对象时获得对ComponentRef的引用?

在这种情况下，我尝试使用interact.js拖放Angular 2组件.该库使用回调函数来通知要拖动的元素以及我们要删除的元素.提供了event对象，我发现的唯一有用的信息是DOM元素(target属性).

I am in the case when I try to drag/drop Angular 2 components using interact.js. The library uses callback functions to notify which element is dragged, and on which element we are trying to drop. An event object is provided, and the only useful information I found was the DOM element (target attribute).

示例:

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属性.

You can check the handlers in src/Interactjs.ts. Open the console to see associated logs and drop a component on another. I have information about elements by the DOM, but I want Angular components instead, let's say access the count attribute.

发现与尝试:

我找到了 jquery-ui-draggable插件的解决方案，但是此技巧在这里不起作用，至少对于目标放置位置而言.

I found a solution for the jquery-ui-draggable plugin, but this trick does not work here, at least for the target where to drop.

还有关于如何插入DOM的主题， DomAdapter，但是我还没有找到从DOM到Angular组件引用似乎有用的方法.

There are also topics about how to insert in the DOM, talking about the DomAdapter, but I haven't found any method that seems to help from DOM to Angular component reference.

我只是想手动搜索我的组件:循环DOM节点，计数以找到位置，并从相同位置的组件列表中到达该组件，但这太丑了...

I just thought about a manual search over my components: looping in the DOM nodes, count to find the position, and reach the component from the component list at the same position, but it is so ugly...

欢迎对此提出任何建议.感谢您的阅读！

Any advice on that is welcome. Thanks for reading!

推荐答案

可以使用 ElementProbe API .它主要用于调试/量角器集成，类似于Angular 1中的element.scope().

This could be achieved using the ElementProbe API. It is mainly intended for debugging / protractor integration, similar to element.scope() in Angular 1.

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

In order to use this API, you would need to include ELEMENT_PROBE_PROVIDERS in your bootstrap() call. You will then be able to get any component instance by calling the global ng.probe().

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

For example, here is how you get the component instance for the current event target:

ng.probe(event.target).componentInstance

更新后的Plunker显示这是动作

Updated Plunker showing this is action

您可以看到ElementProbe API的实际实现这里.

You can see the actual implementation of the ElementProbe API Here.

这篇关于从DOM元素获取ComponentRef的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！