单击时Angular获取对元素的引用
单击时Angular获取对元素的引用
提问于 2019-04-16 00:20:12
我需要获得一个Angular组件的引用，该角度组件与我在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树，直到它找到一个DOM节点，该节点选择器以'app-'开头，这是我的Angular组件前缀的伪代码。然后在找到这个DOM节点之后，我需要以某种方式从中获取Angular组件引用。
请记住，我正在收听所有点击的XComponent可以存在于应用程序的任何位置，因此使用ViewChild / ViewChildren不是一个选项。
PS。此代码用于教育目的，我并不试图遵循Angular设计模式。它不是用于生产环境，而是由我们的开发人员在内部使用。
回答 1
Stack Overflow用户
发布于 2019-04-16 10:09:34
您可以将event.target.matches('.yourclass')用来查找DOM类.yourclass。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006604
复制相关文章
相似问题