Es wurde bereits beantwortet, wie das DOM-Element aus einer Angular 2-Komponente abgerufen werden kann:ComponentRef.location.nativeElement (ComponentRef.location gibt das ElementRef an, das einen direkten Zugriff auf DOM ermöglicht.

AberWie mache ich das Gegenteil, d. h. erhalte ich den Verweis auf ComponentRef, wenn ich nur das native DOM-Objekt habe?

Ich bin in dem Fall, wenn ich versuche, Angular 2-Komponenten mit interact.js zu ziehen / fallen zu lassen. Die Bibliothek verwendet Rückruffunktionen, um zu benachrichtigen, welches Element gezogen wird und auf welchem Element wir es ablegen möchten. Eineventas Objekt @ wird bereitgestellt, und die einzige nützliche Information, die ich gefunden habe, war das DOM-Element target attribute).

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 hier

Sie können die Handler in @ überprüfsrc/Interactjs.ts. Öffnen Sie die Konsole, um die zugehörigen Protokolle anzuzeigen und eine Komponente auf einer anderen abzulegen. Ich habe Informationen zu Elementen im DOM, möchte aber stattdessen Angular-Komponenten verwenden. Nehmen wir an, Sie greifen auf das @ zcount attribute.

Funde und Versuche:

Ich habe einen ... gefundenLösung für das jquery-ui-draggable Plugin, aber dieser Trick funktioniert hier nicht, zumindest für das Ziel, an dem er abgelegt werden soll.

Es gibt auch topics über das Einfügen in das DOM, wobei der DomAdapter im Vordergrund steht, aber ich habe keine Methode gefunden, die von DOM zu Angular-Komponentenreferenz zu helfen scheint.

Ich habe gerade über eine manuelle Suche nach meinen Komponenten nachgedacht: Durchlaufen der DOM-Knoten, Zählen, um die Position zu finden, und Erreichen der Komponente aus der Komponentenliste an derselben Position, aber es ist so hässlich ...

Jegliche Beratung hierzu ist willkommen. Danke fürs Lesen