ngx-bootstrap：如何排除标题元素触发手风琴项的展开/关闭？

当然可以实现这个需求！核心逻辑就是阻止特定元素的点击事件冒泡——因为ngx-bootstrap的手风琴展开/关闭是通过监听accordion-heading容器的点击事件来触发的，只要不让目标元素的点击事件往上传递到这个容器，就能跳过默认的开关行为。

直接给你修改后的代码示例：

<accordion>
  <accordion-group>
    <div accordion-heading>
      <span>This should close the accordion element (the default behavior)</span>
      <!-- 给需要排除的元素添加事件阻止冒泡 -->
      <span (click)="$event.stopPropagation()">This should not close it</span>
    </div>
    <!-- 手风琴内容 -->
    <p>这里是手风琴展开后显示的内容</p>
  </accordion-group>
</accordion>

原理说明 #

当你点击第二个<span>时，$event.stopPropagation()会终止这个点击事件的冒泡过程，它不会传递到父级的accordion-heading容器，因此手风琴的展开/关闭逻辑不会被触发。而第一个<span>没有添加这个处理，所以点击时会保持默认的触发行为。

扩展场景 #

如果是更复杂的交互元素（比如按钮、自定义组件），同样可以用这个方法，甚至可以在阻止冒泡的同时执行自己的业务逻辑：

<div accordion-heading>
  <span>默认触发开关</span>
  <button (click)="$event.stopPropagation(); handleButtonClick()">
    点击我不触发开关，但会执行自定义逻辑
  </button>
</div>

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