Tengo un elemento viewChild que muestro/escondo al asignarle un valor booleano.
<div #acc class="user-info" [ngClass]="{'showDropdown': accountDropdownService.userDropdownIsVisible}"> <div class="user-name"> <div class="color-1 full-name">{{userdata.FirstName}} {{userdata.LastName}}</div> <div class="opened-eye-icon color-6__fm icon-icon_visible_off" [class]="balanceService.showBalance ? 'icon-icon_visible_off' : 'icon-icon_visible'" (click)="balanceService.toggleBalanceVisibility()"></div> </div> <div class="user-id color-6__fm">{{'General.Id'}}: <span><strong>{{userdata.Id}}</strong></span></div> </div>y su archivo .ts
@ViewChild('acc') public acc: ElementRef; this.renderer.listen('window', 'click', (e: Event) => { if (e.target !== this.acc.nativeElement) { console.log('outside'); console.log(e.target); } });Necesito ocultar el elemento viewChild cuando hago clic fuera de él, pero cuando hago clic en sus elementos secundarios, como el nombre de usuario o la identificación del usuario, también se entiende como un clic externo.
¿Cómo puedo evitar esto cuando hago clic en los elementos secundarios de div?
Desea asegurarse de que el objetivo no sea un descendiente del contenedor, no solo el contenedor en sí. Debería usar contains() en su lugar.
this.renderer.listen('window', 'click', (e: Event) => { if (!this.acc.nativeElement.contains(e.target)) { console.log('outside'); console.log(e.target); } });De lo contrario, querrá detener la propagación en los controladores de eventos de clic para los niños, de esa manera esta ventana de escucha no verá el evento. Pero eso podría ser más trabajo para ti de lo necesario.