如何阻止PrimeNG <p-chip>在onRemove事件触发时被移除并保留移除图标

要实现点击移除图标时不删除芯片，同时保留图标可执行自定义操作，不能依赖组件自带的removable属性和onRemove事件——因为组件的移除逻辑是在触发onRemove事件之前就已经执行了，所以event.preventDefault()根本拦不住。正确的做法是自定义右侧的移除图标，完全接管点击逻辑：

1. 关闭组件自带的移除功能：把[removable]设为false
2. 用PrimeNG提供的right模板，手动添加移除图标
3. 给自定义图标绑定点击事件，执行你的自定义逻辑

修改后的HTML代码：

<p-chip
  label="sed"
  icon="pi pi-microsoft"
  [removable]="false"
>
  <ng-template pTemplate="right">
    <span class="pi pi-download p-chip-remove-icon" (click)="onCustomAction($event)"></span>
  </ng-template>
</p-chip>

对应的TypeScript代码：

onCustomAction(event: MouseEvent) {
  event.stopPropagation(); // 防止事件冒泡到chip本身
  console.log('移除图标被点击，芯片不会被删除');
  // 这里写你的自定义操作，比如下载逻辑
}

额外说明 #

• 用p-chip-remove-icon类可以让自定义图标继承PrimeNG原生移除图标的样式，保持视觉一致性
• 添加event.stopPropagation()是为了避免点击图标时触发chip本身的点击事件（如果有绑定的话）

内容的提问来源于stack exchange，提问作者Clinton Hadrian