Já foi respondido como obter o elemento DOM de um componente Angular 2:ComponentRef.location.nativeElement (ComponentRef.location fornece o ElementRef que fornece acesso direto ao DOM).

Mascomo fazer o oposto, ou seja, obter a referência ao ComponentRef quando eu tenho apenas o objeto DOM nativo?

Estou no caso quando tento arrastar / soltar componentes do Angular 2 usando o interact.js. A biblioteca usa funções de retorno de chamada para notificar qual elemento é arrastado e em qual elemento estamos tentando soltar. Aevent é fornecido, e as únicas informações úteis que encontrei foram o elemento DOM (target atributo).

Exemplo:

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 aqui

Você pode verificar os manipuladores emsrc/Interactjs.ts. Abra o console para ver os logs associados e solte um componente em outro. Eu tenho informações sobre elementos do DOM, mas quero componentes Angular, digamos, acessar ocount atributo.

Constatações e tentativas:

Achei umsolução para o plugin jquery-ui-draggable, mas esse truque não funciona aqui, pelo menos para o destino onde cair.

Há tambémtópicos sobre como inserir no DOM, falando sobre o DomAdapter, mas não encontrei nenhum método que pareça ajudar na referência de componente DOM para Angular.

Eu apenas pensei em uma pesquisa manual sobre meus componentes: fazer um loop nos nós DOM, contar para encontrar a posição e alcançar o componente da lista de componentes na mesma posição, mas é tão feio ...

Qualquer conselho sobre isso é bem-vindo. Obrigado pela leitura!