在Angular 2中使用shadow DOM时,Node.contains()是否有效？

我在文档中的任何地方都找不到这个,但是当我点击作为父组件一部分的组件内的东西时,我的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组件内部是否正确？

@ViewChild('element') elementRef: ElementRef;
private allowClose = true;

@HostListener('click',['$event'])
clickInside(event: any) {
  this.allowClose = false;
}

@HostListener('document:click',['$event'])
clickOutside(event: any) {
  if (!this.elementRef.nativeElement.contains(event.target) && this.allowClose) {
    this.handleClose();
  }
  this.allowClose = true;
}