在Angular 2中使用shadow DOM时,Node.contains()是否有效?
发布时间:2020-12-17 17:23:55 所属栏目:安全 来源:网络整理
导读:我在文档中的任何地方都找不到这个,但是当我点击作为父组件一部分的组件内的东西时,我的Node.contains()函数不起作用. 我的父组件如下所示: div class="body" div class="item" *ngFor="let item of sortedItems;" cv-checkbox/cv-checkbox cv-svg-icon/cv-
我在文档中的任何地方都找不到这个,但是当我点击作为父组件一部分的组件内的东西时,我的Node.contains()函数不起作用.
我的父组件如下所示: <div class="body"> <div class="item" *ngFor="let item of sortedItems;"> <cv-checkbox></cv-checkbox> <cv-svg-icon></cv-svg-icon> </div> <div class="drop-zones" *ngFor="let zone of sortedItems.length + 1 | numberToArrayPipe;> <div class="drop-zone"></div> </div> </div> 如您所见,我的父组件中有两个Angular组件:cv-checkbox和cv-svg-icon.我已经向我的父组件添加了一个如下所示的指令: <cv-layer-manager cvClickOutside (clickOutside)="toggleLayerManager()"></cv-layer-manager> 我在哪里检查被点击的节点是否包含在父节点中,如下所示: @HostListener('document:click',['$event']) public onClick(event: MouseEvent) { const clickedInside = this._elementRef.nativeElement.contains(event.target); if (!clickedInside) { this.clickOutside.emit(); } } 如果我单击普通的HTML组件,一切都按预期工作,但是当我点击一个Angular组件时.包含不检查Angular组件内部是否正确? 解决方法
我和datepicker有类似的问题.为解决此问题,我将allowClose属性添加到当前组件.
@ViewChild('element') elementRef: ElementRef; private allowClose = true; 然后我添加了另一个HostListener,它只侦听当前组件的事件. @HostListener('click',['$event']) clickInside(event: any) { this.allowClose = false; } 然后我修改了clickOutside方法以仅在allowClose为true时处理close,然后再次将allowClose设置为true. @HostListener('document:click',['$event']) clickOutside(event: any) { if (!this.elementRef.nativeElement.contains(event.target) && this.allowClose) { this.handleClose(); } this.allowClose = true; } 而已! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |