Angular 2中点击按钮能否关闭全部已打开的PrimeNg手风琴标签？

当然可以实现！PrimeNG的手风琴组件完全支持批量关闭所有已展开的面板，下面我给你两种实用的实现方案，你可以根据项目的PrimeNG版本和需求来选：

方案一：通过activeIndex属性控制（兼容性强，推荐） #

PrimeNG手风琴的activeIndex属性用来绑定当前展开的面板索引，当你把它设置为-1时，所有面板都会自动折叠。

步骤1：模板中绑定activeIndex #

在你的手风琴组件上添加双向绑定的activeIndex，同时添加关闭按钮：

<p-accordion [(activeIndex)]="activePanelIndex">
  <p-accordionTab header="用户管理">用户列表、权限设置</p-accordionTab>
  <p-accordionTab header="系统配置">参数设置、日志查看</p-accordionTab>
  <p-accordionTab header="数据统计">报表生成、趋势分析</p-accordionTab>
</p-accordion>

<button pButton type="button" label="关闭所有面板" (click)="closeAllAccordionTabs()"></button>

步骤2：组件类中实现关闭方法 #

在对应的组件.ts文件里定义变量和方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-menu-accordion',
  templateUrl: './menu-accordion.component.html'
})
export class MenuAccordionComponent {
  // 默认可以设置某个面板展开，比如0是第一个面板，不设置的话默认全部折叠
  activePanelIndex: number = 0;

  closeAllAccordionTabs() {
    this.activePanelIndex = -1; // 关键：设置为-1即可关闭所有面板
  }
}

方案二：调用组件内置的collapseAll()方法（适合新版本PrimeNG） #

如果你的PrimeNG版本比较新（一般v10+以上），手风琴组件提供了内置的collapseAll()方法，可以直接调用它来关闭所有面板。

步骤1：给手风琴添加模板引用 #

<p-accordion #menuAccordion>
  <p-accordionTab header="用户管理">用户列表、权限设置</p-accordionTab>
  <p-accordionTab header="系统配置">参数设置、日志查看</p-accordionTab>
  <p-accordionTab header="数据统计">报表生成、趋势分析</p-accordionTab>
</p-accordion>

<button pButton type="button" label="关闭所有面板" (click)="closeAllTabs()"></button>

步骤2：通过ViewChild获取实例并调用方法 #

import { Component, ViewChild } from '@angular/core';
import { Accordion } from 'primeng/accordion';

@Component({
  selector: 'app-menu-accordion',
  templateUrl: './menu-accordion.component.html'
})
export class MenuAccordionComponent {
  @ViewChild('menuAccordion') accordionInstance!: Accordion;

  closeAllTabs() {
    this.accordionInstance.collapseAll(); // 直接调用内置方法关闭所有面板
  }
}

小提示 #

• 如果你的项目用的是比较旧的PrimeNG版本，可能没有collapseAll()方法，这时候方案一就更靠谱，兼容性拉满。
• 两种方案都可以根据你的实际场景调整，比如默认展开状态、按钮样式之类的。

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