Мне нужно получить ссылку на угловой компонент, связанный с любым элементом, на который я щелкаю мышью в своем приложении Angular.
IE: я щелкаю в любом месте экрана и мне нужно получить ссылку на ближайший угловой компонент (который был создан в моем приложении, а не node_modules) и его внутренние переменные.Я полагаю, что мне нужно каким-то образом запросить дерево углового обзора, чтобы получить это, но я не уверен, с чего начать или возможно ли это даже дистанционно.
Что я пробовал?
export class XComponent implements OnInit {
@HostListener('document:click', ['$event']) handleClick($event) {
let clickedComponent: Node = $event.target;
let inside: boolean = false;
do {
if ( clickedComponent.localName && clickedComponent.localName.substr( 0, 4 ) === "app-" ) {
this.analyzeActiveNode( clickedComponent );
break;
}
clickedComponent = clickedComponent.parentNode;
} while (clickedComponent);
}
analyzeActiveNode( _node: Node ) {
//Somehow get the component and preferrably it's THIS context, that relates to this _node
}
}
Короче говоря, этот код рекурсивно перемещается по дереву DOM, пока не найдет узел DOM, селектор которого начинается с 'app-', что является псевдокодом для моего префикса компонента Angular.Затем, после того как я найду этот DOM-узел, мне нужно каким-то образом извлечь из него ссылку на Angular-компонент.
Помните, что компонент X, на котором прослушиваются все щелчки, может жить в любом месте приложения, поэтому использование ViewChild / ViewChildren не вариант.
PS.Этот код предназначен для образовательных целей, и я не пытаюсь придерживаться шаблонов углового дизайна с ним.Он не предназначен для производственной среды, а используется нашими разработчиками внутри компании.