在更改primeng的单选按钮时防止onclick事件答案

【问题标题】：prevent onclick event while changing radio button of primeng在更改primeng的单选按钮时防止onclick事件
【发布时间】：2021-12-07 21:19:52
【问题描述】：

嗨有简单的primeng单选按钮，在改变选择时，我在onClick函数上有一些逻辑，检查用户是否改变了一些字段，如果他改变了，如果他确定他想离开选择，我会显示消息单选按钮，如果他按下“取消”，我想取消 onlick 功能的所有事件并撤消他最后的选择。但是onclick的事件没有这样做，我检查了java脚本的所有功能。我现在尝试添加 HostListener，如果某个布尔字段（表示用户想要撤消的字段）它将停止即时传播。但在运行时调用的是 onclick 函数而不是 HostListener。一些想法该怎么做？

单选按钮

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

点击功能

 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)
..... 
      }
}

主机监听器

  @HostListener('click', ['$event']) onClick(event) {
    if (this.clickDisallowed) {
      event.stopImmediatePropagation();
    }
    console.log(event);
  }

【问题讨论】：

标签： javascript angular angular8 primeng

【解决方案1】：

也许您错误地使用了主机侦听器。在角度示例中，它在指令中使用

https://angular.io/api/core/HostListener 试试这个例子！

@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 {}

【讨论】：

谢谢，但我不确定这是否是我在这种情况下所需要的，因为我需要在 onclick 函数中执行一些逻辑后，hostlisner（或其他解决方案）将听我的布尔值字段，它（this.clickDisallowed）它将 event.stopImmediatePropagation();