如何在嵌套Angular手风琴中控制igx-expansion-panel的展开折叠？

问题概述 #

使用Ignite UI Angular的igx-accordion实现嵌套手风琴时，父面板的展开/折叠功能正常，但无法通过函数控制子面板（如Panel 2下的Nested Panel 2.1）的展开与折叠。

解决方案 #

步骤1：修改TypeScript代码 #

更新组件类，添加对嵌套手风琴的引用，并实现子面板控制逻辑：

import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { IgxAccordionComponent, IgxExpansionPanelComponent } from 'igniteui-angular';

@Component({
  selector: 'app-accordion-sample-2',
  templateUrl: './accordion-sample-2.component.html',
  styleUrls: ['./accordion-sample-2.component.scss']
})
export class AccordionSample2Component {
  @ViewChild('accordion', { static: true }) accordion!: IgxAccordionComponent;
  @ViewChildren(IgxExpansionPanelComponent) parentPanels: QueryList<IgxExpansionPanelComponent>;
  // 获取所有嵌套的手风琴组件
  @ViewChildren('nestedAccordion') nestedAccordions: QueryList<IgxAccordionComponent>;

  public singleBranchExpand = false;

  public panels = [
    { title: 'Panel 1', content: 'Content for Panel 1' },
    {
      title: 'Panel 2',
      content: 'Content for Panel 2',
      nestedPanels: [
        { title: 'Nested Panel 2.1', content: 'Content for Nested Panel 2.1' },
        { title: 'Nested Panel 2.2', content: 'Content for Nested Panel 2.2' },
      ],
    },
    {
      title: 'Panel 3',
      content: 'Content for Panel 3',
      nestedPanels: [
        { title: 'Nested Panel 3.1', content: 'Content for Nested Panel 3.1' },
        { title: 'Nested Panel 3.2', content: 'Content for Nested Panel 3.2' },
      ],
    },
  ];

  parentExpandPanel(event: any) {
    this.parentPanels.toArray().forEach((panel) => panel.open());
  }

  parentCollapsePanel(event: any) {
    this.parentPanels.toArray().forEach((panel) => panel.close());
  }

  // 展开指定父面板下的子面板
  childExpandPanel(parentIndex: number, childIndex: number) {
    // 先确保父面板处于展开状态（否则子面板不可见）
    const parentPanel = this.parentPanels.toArray()[parentIndex];
    if (!parentPanel.expanded) {
      parentPanel.open();
    }
    // 获取目标嵌套手风琴
    const targetNestedAccordion = this.nestedAccordions.toArray()[parentIndex];
    // 获取目标子面板并展开
    const targetChildPanel = targetNestedAccordion.panels.toArray()[childIndex];
    targetChildPanel.open();
  }

  // 折叠指定父面板下的子面板
  childCollapsePanel(parentIndex: number, childIndex: number) {
    const targetNestedAccordion = this.nestedAccordions.toArray()[parentIndex];
    const targetChildPanel = targetNestedAccordion.panels.toArray()[childIndex];
    targetChildPanel.close();
  }
}

步骤2：修正HTML中的按钮参数 #

由于面板索引从0开始，调整按钮点击事件的参数，确保指向正确的子面板：

<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch>
<article class="sample-wrapper">
  <button type="button" igxButton (click)="parentExpandPanel($event)">
    Parent Expand Panel
  </button>
  <button type="button" igxButton (click)="parentCollapsePanel($event)">
    Parent Collapse Panel
  </button>
  <!-- 展开Panel 2 -> Nested Panel 2.1（父面板索引1，子面板索引0） -->
  <button type="button" igxButton (click)="childExpandPanel(1, 0)">
    Child Expand Panel (Panel 2 -> Nested 2.1)
  </button>

  <!-- 折叠Panel 2 -> Nested Panel 2.1 -->
  <button type="button" igxButton (click)="childCollapsePanel(1, 0)">
    Child Collapse Panel (Panel 2 -> Nested 2.1)
  </button>
<igx-accordion #accordion [singleBranchExpand]="singleBranchExpand">
    <igx-expansion-panel *ngFor="let panel of panels; let i = index" #parentPanel>
      <igx-expansion-panel-header>
        <igx-expansion-panel-title>
          {{ panel.title }}
        </igx-expansion-panel-title>
      </igx-expansion-panel-header>
      <igx-expansion-panel-body>
        {{ panel.content }}
        <igx-accordion #nestedAccordion *ngIf="panel.nestedPanels">
          <igx-expansion-panel
            *ngFor="let nestedPanel of panel.nestedPanels; let j = index"
            #nestedPanel
          >
            <igx-expansion-panel-header>
              <igx-expansion-panel-title>
                {{ nestedPanel.title }}
              </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
              {{ nestedPanel.content }}
            </igx-expansion-panel-body>
          </igx-expansion-panel>
        </igx-accordion>
      </igx-expansion-panel-body>
    </igx-expansion-panel>
  </igx-accordion>
</article>

关键逻辑说明 #

1. 获取嵌套手风琴引用：通过@ViewChildren('nestedAccordion')获取所有父面板下的嵌套手风琴组件，每个嵌套手风琴对应一个带有子面板的父面板。
2. 关联父面板与子面板：利用父面板的索引找到对应的嵌套手风琴，再通过子面板索引定位到目标子面板。
3. 父面板预展开：在展开子面板前先检查父面板状态，确保父面板处于展开状态，避免子面板因父面板折叠而无法显示。

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