Funktioniert Node.contains() bei der Arbeit mit Shadow DOM in Angular 2?

Question

Ich konnte dies nirgends in den Dokumenten finden, aber meine Node.contains() Funktion funktioniert nicht, wenn ich auf etwas innerhalb einer Komponente, die Teil einer übergeordneten Komponente ist, klicken.

Meine Eltern Komponente sieht wie folgt aus:

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

Wie Sie kann ich zwei Winkelkomponenten in meinem Elternkomponente sehen haben: cv-checkbox und cv-svg-icon. Ich habe eine Richtlinie zu meiner Eltern Komponente hinzugefügt, die wie folgt aussieht:

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

Wo lese ich überprüfen, ob die angeklickt Knoten durch die Mutter wie folgt enthalten ist:

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

Wenn ich normale HTML-Komponenten klicken alles funktioniert wie erwartet, aber nicht, wenn ich auf eine eckige Komponente klicke. Stimmt es, dass contains nicht innerhalb der Angular Komponente prüft?

Answer 1

Überprüfen Sie, ob Sie wie ngIf oder ngSwitch aktualisieren, so dass die untergeordneten Komponenten verschwinden.So wenn Sie parentComponent.contains (childComponent) tun, funktioniert es nicht, obwohl Sie anwesend waren, als Sie tatsächlich geklickt hatten. Ich hatte dies gestern beobachtet wo dieser Code nicht funktioniert und ich musste einen Workaround mit diesem teilweise tun. Danke.

Answer 2

Ich hatte ein ähnliches Problem mit einem Datepicker. Um dieses Problem zu beheben, habe ich die Eigenschaft allowClose der aktuellen Komponente hinzugefügt.

Dann habe ich einen anderen HostListener hinzugefügt, der nur auf Ereignisse der aktuellen Komponente hört.

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

Dann modifizierte ich meine clickOutside Methode schließen nur zu behandeln, wenn AllowClose wahr ist, und legen Sie dann AllowClose wieder auf true zurück.

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

Das war's!