Aplicación angular que usa una tabla de datos ngx . Esta tabla rellena automáticamente sus [rows] . Dentro de estas filas hay una [action] que muestra una ventana emergente de elementos. Esta ventana emergente es un componente separado de la tabla. Estoy llamando a la ventana emergente de la tabla en un enlace principal> secundario, por ejemplo
<ngx-datatable-column name="Actions"> <ng-template let-row="row" ngx-datatable-cell-template> <app-actions-pop-up [actions]="row.actions"></app-actions-pop-up> </ng-template> </ngx-datatable-column> Esto llama al componente emergente de acción. Tengo un @HostListener que escucha los clics en la página de un Event . Esto luego devuelve verdadero/falso para abrir o cerrar la ventana emergente.
Esto es costoso ya que mi aplicación tendrá miles de filas y afectará la representación ya que también se escucha un clic, independientemente de si se hace clic en el botón de acciones.
por ejemplo, si hay elementos de 4 filas, se repetirá 4 veces. Imagínese si hubiera miles de filas.
Aquí se encuentra una solución encantadora: Detectar clic fuera del componente Angular donde agrega un @Hostlistener() al evento de clic del documento solo una vez dentro del componente emergente. El evento debe enviar el valor del elemento de destino en el que se hizo clic dentro de un asunto público almacenado en un servicio de utilidad global.
Sin embargo, he tenido problemas para implementar esto hasta ahora en mi configuración. Cualquier ayuda sería apreciada aquí - ejemplo de stackBlitz
Sugeriría simplemente agregar (document:click)="clickout($event)" en su contenedor emergente.
html
<div *ngIf="isActive" (document:click)="clickout($event)" class="actions__container">t
clickout(event) { this.isActive = this.eRef.nativeElement.contains(event.target); }Angular se suscribirá a ese evento solo en caso de que la ventana emergente esté abierta y cancelará la suscripción cuando esté cerrada. Por lo tanto, tendrá cero o solo una suscripción.
También puede leer uno de mis artículos sobre esta optimización.