如何在Angular 14中通过组件TS文件按钮切换ngbAccordion？

步骤1：获取NgbAccordion实例 #

在组件类中通过@ViewChild装饰器绑定模板里的ngbAccordion组件，拿到实例才能调用其内置方法控制状态。

步骤2：编写toggleAcc切换方法 #

利用NgbAccordion提供的expandAll()和collapseAll()方法，结合panels属性判断当前面板状态，实现一键切换。

完整代码示例 #

组件HTML（对应你已有的模板结构）

<button (click)="toggleAcc()">切换折叠面板</button>

<ngb-accordion #accordion="ngbAccordion">
  <ngb-panel title="面板1">
    <ng-template ngbPanelContent>
      面板1内容
    </ng-template>
  </ngb-panel>
  <ngb-panel title="面板2">
    <ng-template ngbPanelContent>
      面板2内容
    </ng-template>
  </ngb-panel>
</ngb-accordion>

组件TS文件实现

import { Component, ViewChild } from '@angular/core';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  @ViewChild('accordion') accordion!: NgbAccordion;

  toggleAcc(): void {
    // 判断所有面板是否处于全折叠状态
    const isAllCollapsed = this.accordion.panels.every(panel => !panel.isOpen);
    
    isAllCollapsed ? this.accordion.expandAll() : this.accordion.collapseAll();
  }
}

说明 #

• @ViewChild('accordion') 关联模板中标记为#accordion的ngbAccordion实例
• 通过panels遍历所有面板，判断当前全局状态
• 调用内置方法完成批量展开/折叠操作

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