单击时，Angular获得对元素的引用

Question

我需要获取与我在Angular应用程序中用鼠标单击的任何元素相关的角度组件的引用。

IE：我在屏幕上的任意位置单击，我需要获取最接近的Angular组件（在我的应用程序中创建，而不是node_modules创建）及其内部变量的引用。我认为我必须以某种方式查询Angular视图树才能获得此功能，但是我不确定从哪里开始或是否可以远程实现。

我尝试了什么？

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树，直到找到一个以'app-'开头的DOM节点，这是我的Angular组件前缀的伪代码。然后，在找到此DOM节点之后，我需要以某种方式从其中获取Angular组件引用。

请记住，我正在听所有单击的XComponent可以存在于应用程序中的任何位置，因此不能使用ViewChild / ViewChildren。

PS。这段代码是出于教育目的，我并不想以此来遵循Angular设计模式。它不是为生产环境制作的，而是由我们的开发人员在内部使用的。