Angular+PrimeNG嵌套手风琴：切换外层时内层自动关闭问题

问题原因 #

你当前的代码中，所有手风琴的[activeIndex]都硬编码为0。当外层手风琴折叠时，内层手风琴的DOM会被隐藏（或组件重新初始化），再次展开外层时，内层手风琴会重新读取硬编码的0，导致之前手动展开的状态被重置。

解决方案 #

需要将每一层手风琴的激活索引绑定到组件类的变量，并监听索引变化事件来保存状态：

1. 在组件类中定义状态变量 #

在你的Angular组件.ts文件中，添加对应每一层手风琴的变量：

// 外层手风琴激活索引
outerAccordionIndex = 0;
// 第一层内层手风琴激活索引
innerAccordionIndex1 = 0;
// 第二层内层手风琴激活索引
innerAccordionIndex2 = 0;

2. 修改模板绑定变量与事件 #

将模板中每个手风琴的[activeIndex]绑定到对应变量，并添加activeIndexChange事件监听来更新变量：

<p-accordion [activeIndex]="outerAccordionIndex">
  <p-accordionTab header="Header I">
    <div>
      <p-accordion 
        [activeIndex]="innerAccordionIndex1"
        (activeIndexChange)="innerAccordionIndex1 = $event"
      >
        <p-accordionTab header="Header I">
          <p>111</p>
          <p-accordion 
            [activeIndex]="innerAccordionIndex2"
            (activeIndexChange)="innerAccordionIndex2 = $event"
          >
            <p-accordionTab header="Header I">
              <p>222</p>
            </p-accordionTab>
          </p-accordion>
        </p-accordionTab>
      </p-accordion>
    </div>
  </p-accordionTab>
</p-accordion>

原理说明 #

通过将激活索引绑定到组件类的变量，用户手动切换内层手风琴标签时，activeIndexChange事件会同步更新变量的值，状态被持久保存在组件中。当外层手风琴折叠再展开时，内层手风琴会读取变量中保存的最新索引，从而恢复之前的展开状态，不会被重置为默认的0。

内容的提问来源于stack exchange，提问作者ישראל גוטליב