Получить ComponentRef из элемента DOM
Уже было дано ответ, как получить элемент DOM из компонента Angular 2:ComponentRef.location.nativeElement
(ComponentRef.location предоставляет ElementRef, который дает прямой доступ к DOM).
Нокак сделать обратное, то есть получить ссылку на ComponentRef, когда у меня есть только собственный объект DOM?
Я нахожусь в том случае, когда я пытаюсь перетащить компоненты Angular 2 с использованием interactive.js. Библиотека использует функции обратного вызова, чтобы уведомить, какой элемент перетаскивается, и какой элемент мы пытаемся удалить.event
объект предоставлен, и единственной полезной информацией, которую я нашел, был элемент DOM (target
атрибуты).
Пример:
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.
}
// ...
});
Вы можете проверить обработчики вsrc/Interactjs.ts
, Откройте консоль, чтобы увидеть связанные журналы и поместите один компонент в другой. У меня есть информация об элементах DOM, но я хочу использовать компоненты Angular, скажем, доступ кcount
приписывать.
Находки и попытки:
Я нашелрешение для jquery-ui-draggable плагина, но этот трюк здесь не работает, по крайней мере, для цели, куда можно бросить.
Это такжетемы о том, как вставить в DOM, говоря о DomAdapter, но я не нашел ни одного метода, который бы помог от DOM до ссылки на Angular.
Я только что подумал о ручном поиске по моим компонентам: циклический поиск в узлах DOM, подсчет, чтобы найти позицию, и достичь компонента из списка компонентов в той же позиции, но это так уродливо ...
Любые советы по этому поводу приветствуются. Спасибо за прочтение!