Angular中如何禁用MDBootstrap手风琴组件的点击折叠功能

以下是3种实测可用的实现方式，按需选择即可：

方案1：绑定组件原生disabled属性（优先推荐） #

mdb-accordion-item自带的disabled输入属性官方文档没有放在醒目位置，翻组件源码可确认，MDB Angular v5.x全版本通用。绑定为true后会直接阻断头部的点击切换逻辑，同时不会影响你通过TS代码主动控制面板的展开/收起状态。
参考代码：

<mdb-accordion [multiple]="true">
  <!-- 给需要禁用点击的面板项绑定disabled属性 -->
  <mdb-accordion-item [disabled]="true" [collapsed]="false">
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
     Accordion tab 1
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item [disabled]="true" [collapsed]="false">
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
     Accordion tab 2
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item [disabled]="true" [collapsed]="false">
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      Accordion tab 3
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

说明：绑定[collapsed]="false"可以让面板默认保持展开状态，需要默认收起将值改为true即可，禁用点击后用户无法手动切换状态，仅能通过代码调用组件API修改。

方案2：CSS屏蔽点击事件（无侵入式实现） #

如果不想修改组件逻辑配置，直接通过样式屏蔽头部点击事件即可，适合临时需求、全局统一禁用的场景，不用改动现有HTML结构。
在对应样式文件中添加：

mdb-accordion .accordion-button {
  pointer-events: none;
  /* 可选：去掉鼠标悬浮时的手型光标，明确提示不可交互 */
  cursor: default;
}

注意：该方案会禁用头部所有交互，如果头部自定义了其他需要点击的按钮元素，不要使用此方法。

方案3：拦截点击事件阻止冒泡 #

如果需要保留头部的部分点击逻辑（比如点击头部触发其他业务操作，仅阻止折叠/展开切换），可以在自定义头部模板中拦截点击事件阻止冒泡：

<mdb-accordion [multiple]="true">
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>
      <div (click)="$event.stopPropagation(); customHeaderClick()">
        Accordion Item #1
      </div>
    </ng-template>
    <ng-template mdbAccordionItemBody>
     Accordion tab 1
    </ng-template>
  </mdb-accordion-item>
  <!-- 其余面板项按相同逻辑添加即可 -->
</mdb-accordion>

原理：MDB手风琴的折叠切换逻辑是绑定在头部根元素的点击事件上的，阻止事件冒泡后就不会触发内置的折叠逻辑，事件回调中可以正常添加自己需要的业务逻辑。

优先选择第一种方案，属于组件原生支持的能力，不会出现样式兼容问题，也不会随版本升级失效。

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