如何检测PrimeNG侧边栏关闭图标及侧边栏内其他按钮的点击事件

当然可以实现，具体方案如下：

1. 自定义关闭图标，绑定撤销逻辑 #

PrimeNG Sidebar默认关闭按钮没有单独的点击事件，你可以隐藏默认按钮，在侧边栏头部自定义关闭图标并直接绑定撤销逻辑：

<p-sidebar [(visible)]="sidebarVisible" showCloseIcon="false">
  <ng-template pTemplate="header">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h3>编辑面板</h3>
      <button pButton icon="pi pi-times" (click)="onCancelChanges()"></button>
    </div>
  </ng-template>

  <!-- 你的表单/编辑内容区域 -->
  <button pButton label="保存" (click)="onSaveChanges()"></button>
</p-sidebar>

对应组件逻辑：

onCancelChanges() {
  // 编写撤销更改的逻辑，比如重置表单、恢复原始数据
  this.sidebarVisible = false; // 关闭侧边栏
}

onSaveChanges() {
  // 编写保存更改的逻辑，比如提交表单、更新数据源
  this.sidebarVisible = false; // 保存完成后关闭侧边栏
}

2. 利用onHide事件结合状态标记（保留默认关闭按钮） #

如果想保留默认关闭按钮，可以通过状态标记区分“保存关闭”和“取消关闭”：

<p-sidebar [(visible)]="sidebarVisible" (onHide)="handleSidebarHide()">
  <!-- 你的表单/编辑内容区域 -->
  <button pButton label="保存" (click)="handleSave()"></button>
</p-sidebar>

对应组件逻辑：

private isSaveAction = false;

handleSave() {
  // 执行保存逻辑
  this.isSaveAction = true;
  this.sidebarVisible = false;
}

handleSidebarHide() {
  if (!this.isSaveAction) {
    // 非保存触发的关闭，执行撤销逻辑
    // 重置表单、恢复原始数据
  }
  // 重置状态标记
  this.isSaveAction = false;
}

两种方案中，自定义关闭按钮的方式逻辑更清晰直观，推荐优先使用。

内容的提问来源于stack exchange，提问作者Nithin P.H