Get ComponentRef von DOM-Element

Question

Es wurde bereits beantwortet, wie das DOM-Element von einer Angular 2-Komponente erhalten: ComponentRef.location.nativeElement (ComponentRef.location gibt die ElementRef, die einen direkten Zugriff auf DOM gibt).

Aber wie das Gegenteil zu tun, d. H. Den Verweis auf die ComponentRef erhalten, wenn ich nur das native DOM-Objekt habe?

Ich bin in dem Fall, wenn ich versuche, Angular 2 Komponenten mit interact.js Drag/Drop. Die Bibliothek verwendet Callback-Funktionen, um mitzuteilen, welches Element gezogen wird und welches Element wir löschen wollen. Ein event Objekt wird bereitgestellt, und die einzige nützliche Information, die ich fand, war das DOM-Element (target Attribut).

Beispiel:

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

Sie können die Handler in src/Interactjs.ts überprüfen. Öffnen Sie die Konsole, um die zugehörigen Protokolle anzuzeigen, und legen Sie eine Komponente auf einer anderen ab. Ich habe Informationen über Elemente durch das DOM, aber ich möchte stattdessen eckige Komponenten, sagen wir, Zugriff auf das count Attribut.

Ergebnisse und versucht:

finde ich ein solution for the jquery-ui-draggable plugin, aber dieser Trick nicht funktioniert, zumindest für das Ziel, wo fallen zu lassen.

Es gibt auch topics über, wie man im DOM einfügt, über den DomAdapter sprechend, aber ich habe keine Methode gefunden, die scheint, von DOM zur Winkelbestandteilreferenz zu helfen.

Ich dachte nur, um eine manuelle Suche über meine Komponenten: in dem DOM-Knoten Looping, zählen die Position zu finden, und die Komponente aus der Komponentenliste in der gleichen Position erreichen, aber es ist so hässlich ...

Jeder Rat ist willkommen. Danke fürs Lesen!

Answer 1

Dies könnte mit der ElementProbe API erreicht werden. Es dient in erster Linie für das Debugging/Winkelmesser Integration, ähnlich wie element.scope() in Angular 1.

Um diese API zu verwenden, würden Sie ELEMENT_PROBE_PROVIDERS in Ihrem bootstrap() Gespräch einbeziehen müssen. Sie können dann jede Komponenteninstanz abrufen, indem Sie das globale ng.probe() aufrufen.

Zum Beispiel, hier ist, wie Sie die Komponenteninstanz für das aktuelle Ereignis-Ziel erhalten:

ng.probe(event.target).componentInstance 

Updated Plunker showing this is action

Sie können die tatsächliche Implementierung der ElementProbe API Here sehen.