Angular 2のシャドーDOMを扱うときにNode.contains（）は機能しますか？

Question

ドキュメント内のどこにも見つかりませんでしたが、親コンポーネントのコンポーネント内の何かをクリックするとNode.contains（）関数が動作しません。 cv-checkboxとcv-svg-icon：あなたは私は私の親コンポーネント内部の2つの角度のコンポーネントを持って見ることができるように

<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> 

：

私の親コンポーネントは次のようになります。

クリックノードは、このような親に含まれている場合、私はチェック

<cv-layer-manager cvClickOutside (clickOutside)="toggleLayerManager()"></cv-layer-manager> 

：：私は、通常のHTMLコンポーネントをクリックした場合

@HostListener('document:click', ['$event']) public onClick(event: MouseEvent) { 
    const clickedInside = this._elementRef.nativeElement.contains(event.target); 
    if (!clickedInside) { 
     this.clickOutside.emit(); 
    } 
} 

私はこのようになります私の親コンポーネントへのディレクティブを追加しましたすべてが期待通りに機能しますが、角度コンポーネントをクリックしても機能しません。 containsがAngularコンポーネントの内部をチェックしていないのは正しいですか？

Answer 1

子コンポーネントが消えるようにngIfやngSwitchのようにリフレッシュしているか確認してください。parentComponent.contains（childComponent）を実行すると、実際にクリックされたときには動作しません。この昨日このコードはうまく動かず、私はこれを部分的に使って回避策を講じなければなりませんでした。

Answer 2

私はdatepickerで同様の問題がありました。この問題を解決するために、allowCloseプロパティを現在のコンポーネントに追加しました。

private allowClose = true; 

次に、現在のコンポーネントのイベントだけをリッスンする別のHostListenerを追加しました。

次に、allowCloseがtrueである場合にのみcloseを処理し、allowCloseを再びtrueに戻すように、clickOutsideメソッドを変更しました。

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

これだけです！