我在文档中的任何地方都找不到这个,但是当我点击作为父组件一部分的组件内的东西时,我的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;
}
而已!
请检查你是否像ngIf或ngSwitch一样令人耳目一新,以便子组件消失。所以当你做parentComponent.contains(childComponent)它不会在你实际点击时出现。我昨天观察到这个代码不会工作,我不得不部分地使用这个解决方法。谢谢。