Question

我无法在文档中的任何位置找到它，但是当我点击属于父组件的组件内的某些内容时，我的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组件内部不进行检查？

Answer 1

我遇到了与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;
}

就是这样！

Answer 2

请检查你是否像ngIf或ngSwitch一样令人耳目一新，以便子组件消失。所以当你做parentComponent.contains（childComponent）时，尽管你实际上已经点击了它，它仍然无法工作。我昨天观察过这里这段代码不起作用，我不得不部分地使用它来解决这个问题。谢谢。

在Angular 2中使用shadow DOM时，Node.contains（）是否有效？

2 个答案: