Hola, tengo botones de radio simples de primeng, mientras cambio la elección, tengo algo de lógica en la función onClick, verificando si el usuario cambió algunos campos, si cambió, mostraré un mensaje si está seguro de que quiere dejar la opción del botón de radio , si presiona "cancelar", quiero cancelar todo el evento de la función onlick y deshacer su última elección. pero en el caso de que onclick no lo hiciera, verifiqué todas las funciones de java script. Ahora intenté agregar HostListener que si algún campo booleano (el que decía que el usuario desea deshacer) detendría la propagación inmediata. pero en el tiempo de ejecución, se llamó a la función onclick y no a HostListener. algunas ideas de que hacer?
boton de radio
<p-radioButton name="treesDetailsType" [(ngModel)]="selectedType" formControlName="selectedType" (onClick)="onChangeType(type,$event)" class="treeDetails" value="{{type.id}}" label="{{type.desc}}" [disabled]="isReadOnly && type.id != data.selectedType"></p-radioButton>la función onclick
onChangeType(type, event) { let change = this.checkChanges(type, event); if (change) { //HERE I WANT TO CANCEL ALL THE CHANGE AND TO LEAVE THE FUNCTION this.clickDisallowed = true; } else { switch (type.id) ..... } }el oyente anfitrión
@HostListener('click', ['$event']) onClick(event) { if (this.clickDisallowed) { event.stopImmediatePropagation(); } console.log(event); }Tal vez esté usando el hostlistener incorrectamente. En el ejemplo angular se usa dentro de una directiva
https://angular.io/api/core/HostListener ¡Prueba este ejemplo!
@Directive({selector: 'button[counting]'}) class CountClicks { numberOfClicks = 0; @HostListener('click', ['$event.target']) onClick(btn) { console.log('button', btn, 'number of clicks:', this.numberOfClicks++); } } @Component({ selector: 'app', template: '<button counting>Increment</button>', }) class App {}