Ottieni ComponentRef dall'elemento DOM

Question

È già stata fornita una risposta su come ottenere l'elemento DOM da un componente Angular 2: ComponentRef.location.nativeElement (ComponentRef.location fornisce ElementRef che fornisce un accesso diretto al DOM).

Ma come fare il contrario, cioè ottenere il riferimento a ComponentRef quando ho solo l'oggetto DOM nativo?

Sono nel caso in cui si tenti di trascinare/rilasciare componenti Angular 2 utilizzando interact.js. La libreria utilizza le funzioni di callback per notificare quale elemento viene trascinato e su quale elemento stiamo cercando di eliminare. Viene fornito un oggetto event e l'unica informazione utile che ho trovato era l'elemento DOM (attributo target).

Esempio:

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

È possibile controllare i gestori in src/Interactjs.ts. Aprire la console per vedere i registri associati e rilasciare un componente su un altro. Ho informazioni sugli elementi dal DOM, ma voglio invece i componenti Angolari, diciamo accediamo all'attributo count.

Risultati e tentativi:

ho trovato un solution for the jquery-ui-draggable plugin, ma questo trucco non funziona qui, almeno per il target cui a goccia.

Ci sono anche topics su come inserire nel DOM, parlando del DomAdapter, ma non ho trovato alcun metodo che sembra aiutare dal DOM al riferimento del componente Angolare.

ho solo pensato a una ricerca manuale sui miei componenti: loop nei nodi DOM, contare fino a trovare la posizione, e raggiungere il componente dalla lista dei componenti nella stessa posizione, ma è così brutto ...

Qualsiasi consiglio su questo è il benvenuto. Grazie per aver letto!

Answer 1

Questo potrebbe essere ottenuto utilizzando ElementProbe API. Esso è destinato principalmente per il debug/integrazione goniometro, simile a element.scope() in angolare 1.

Per poter utilizzare questa API, si avrebbe bisogno di includere nel vostro ELEMENT_PROBE_PROVIDERSbootstrap() chiamata. Sarai quindi in grado di ottenere qualsiasi istanza del componente chiamando il numero globale ng.probe().

Ad esempio, ecco come si ottiene l'istanza del componente per il target dell'evento corrente:

ng.probe(event.target).componentInstance 

Updated Plunker showing this is action

Si può vedere l'effettiva implementazione delle API ElementProbe Here.