Angular中accordion-toggle无延时获取面板开合状态方法

问题核心原因 #

之前的写法需要加延时才能拿到正确class，本质是Bootstrap原生collapse组件的展开/折叠动画是异步执行的，点击触发瞬间show类还没被添加/移除，直接查询DOM拿到的是变更前的状态，靠固定1500ms延时等待的方式兼容性很差，设备性能不同动画时长会变，很容易拿到错误结果。

下面提供两种可直接落地的方案，都不需要加延时： #

方案1：数据驱动维护状态（Angular推荐实现） #

完全抛弃原生Bootstrap的data属性控制和DOM查询逻辑，用Angular本身的状态绑定控制折叠，点击时可以同步拿到开合布尔值，零延迟。

TypeScript 代码调整 #

// 组件类内定义面板状态数组，索引和sectionList一一对应，初始值全部为折叠false
panelOpenStatus: boolean[] = [];

// 你的sectionList赋值逻辑完成后，同步初始化状态数组
initSectionData() {
  // 替换成你实际获取sectionList的逻辑
  this.sectionList = await this.yourService.getSectionList();
  // 初始化所有面板为折叠状态
  this.panelOpenStatus = new Array(this.sectionList.length).fill(false);
}

checkUncheck(rowIndex: number) {
  // 直接切换对应索引的面板状态，不需要查DOM
  this.panelOpenStatus[rowIndex] = !this.panelOpenStatus[rowIndex];
  // 这里直接就能拿到点击后的准确开合状态
  const currentPanelIsOpen = this.panelOpenStatus[rowIndex];
  console.log('当前面板开合状态：', currentPanelIsOpen);
  // 后续可以直接基于currentPanelIsOpen做后续业务逻辑
}

模板代码调整 #

移除Bootstrap原生的data-toggle、data-target属性，避免原生逻辑和Angular状态冲突，用Angular的类绑定控制show类的添加移除：

<tr align="center" *ngFor="let section of sectionList ; let RowIndex = index;">
   <td colspan="6">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered bg-white">
         <tr>
            <td>
              <button (click)="checkUncheck(RowIndex)"
               class="accordion-toggle btn btn-default btn-xs">
                <span class="glyphicon" [ngClass]="panelOpenStatus[RowIndex] ? 'glyphicon-eye-close' : 'glyphicon-eye-open'"></span>
                {{ panelOpenStatus[RowIndex] ? '-' : '+' }}
              </button>
            </td>
            <td>{{section.sectionName}} {{RowIndex}}</td>
         </tr>
         <tr>
            <td colspan="6">
               <div class="hiddenRow">
                  <!-- 绑定show类，和状态数组完全同步 -->
                  <div class="accordian-body collapse" [class.show]="panelOpenStatus[RowIndex]">
                     yeah man test {{RowIndex}}
                  </div>
               </div>
            </td>
         </tr>
      </table>
   </td>
</tr>

这个方案完全符合Angular数据驱动的开发思路，没有DOM操作，状态100%同步，可维护性最高，优先选用。 #

方案2：保留原生Bootstrap collapse逻辑，监听事件拿状态 #

如果你不想改动现有折叠的原生实现逻辑，可以直接监听Bootstrap collapse暴露的原生事件，动画执行完成后会自动触发回调，不需要写固定延时。

TypeScript 代码调整 #

import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';

export class YourComponent implements AfterViewInit, OnDestroy {
  panelOpenStatus: boolean[] = [];
  // 存储事件销毁方法，避免内存泄漏
  private listenerRemovers: Array<() => void> = [];

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    // 视图渲染完成后为每个折叠面板绑定状态事件
    this.sectionList.forEach((_, index) => {
      const panelNode = this.elementRef.nativeElement.querySelector(`#SectionDemo${index}`);
      if (!panelNode) return;

      // 面板完全展开触发
      const onShow = () => {
        this.panelOpenStatus[index] = true;
        console.log(`面板${index}展开完成，状态：`, this.panelOpenStatus[index]);
      };
      // 面板完全折叠触发
      const onHide = () => {
        this.panelOpenStatus[index] = false;
        console.log(`面板${index}折叠完成，状态：`, this.panelOpenStatus[index]);
      };

      panelNode.addEventListener('shown.bs.collapse', onShow);
      panelNode.addEventListener('hidden.bs.collapse', onHide);

      this.listenerRemovers.push(() => {
        panelNode.removeEventListener('shown.bs.collapse', onShow);
        panelNode.removeEventListener('hidden.bs.collapse', onHide);
      });
    });
  }

  ngOnDestroy() {
    // 组件销毁时移除所有监听
    this.listenerRemovers.forEach(remove => remove());
  }

  checkUncheck(rowIndex: number) {
    // 点击瞬间可以拿到切换前的状态，最终准确状态在事件回调中获取
    console.log('点击触发，切换前状态：', this.panelOpenStatus[rowIndex]);
  }
}

模板部分不需要改动，保留原来的data-toggle、data-target属性即可。 #

避坑提示 #

• 不要继续使用固定延时的setTimeout/setInterval查询DOM，不同设备动画执行时长存在差异，很容易出现状态判断错误
• 尽量减少直接操作DOM的逻辑，优先用Angular的数据绑定实现UI交互，避免出现框架状态和原生UI状态不一致的问题

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