如何手动实现@ViewChild功能，获取嵌套ngbAccordion/Item实例？

你不需要依赖DOM模拟点击，有两种更直接的方式获取ngbAccordion/ngbAccordionItem实例并调用expand()方法：

方法一：手动维护实例映射表 #

在组件内创建两个Map，分别存储所有折叠面板和面板项的ID与对应实例的关联：

1. 组件代码中定义映射表：

import { NgbAccordion, NgbAccordionItem } from '@ng-bootstrap/ng-bootstrap';

private accordionInstances = new Map<string, NgbAccordion>();
private accordionItemInstances = new Map<string, NgbAccordionItem>();

// 注册折叠面板实例
registerAccordion(id: string, accordion: NgbAccordion) {
  this.accordionInstances.set(id, accordion);
}

// 注册折叠面板项实例
registerAccordionItem(id: string, item: NgbAccordionItem) {
  this.accordionItemInstances.set(id, item);
}

2. 在模板中，给每个动态生成的折叠面板/项添加(init)事件，将实例传入注册方法：

<!-- 折叠面板 -->
<ngb-accordion 
  #accordion="ngbAccordion" 
  [id]="panelId" 
  (init)="registerAccordion(panelId, accordion)"
>
  <!-- 嵌套的折叠面板项 -->
  <ngb-accordion-item 
    #item="ngbAccordionItem" 
    [id]="itemId" 
    (init)="registerAccordionItem(itemId, item)"
  >
    <ng-template ngbAccordionHeader>
      <button ngbAccordionButton>{{ itemTitle }}</button>
    </ng-template>
    <ng-template ngbAccordionContent>
      <!-- 子折叠面板或内容 -->
    </ng-template>
  </ngb-accordion-item>
</ngb-accordion>

3. 导航时，通过ID从映射表中取出实例，调用expand()，同时递归处理父级面板：

navigateToPanel(targetId: string, parentIds: string[]) {
  // 展开目标面板项
  const targetItem = this.accordionItemInstances.get(targetId);
  targetItem?.expand();

  // 展开所有父级折叠面板
  parentIds.forEach(parentId => {
    const parentAccordion = this.accordionInstances.get(parentId);
    parentAccordion?.expand();
  });
}

方法二：通过@ViewChildren获取所有实例 #

利用@ViewChildren获取页面中所有ngbAccordion和ngbAccordionItem的实例集合，再根据ID筛选：

1. 组件中声明QueryList：

import { ViewChildren, QueryList } from '@angular/core';
import { NgbAccordion, NgbAccordionItem } from '@ng-bootstrap/ng-bootstrap';

@ViewChildren(NgbAccordion) accordionList!: QueryList<NgbAccordion>;
@ViewChildren(NgbAccordionItem) accordionItemList!: QueryList<NgbAccordionItem>;

2. 编写查找实例的方法：

getAccordionById(id: string): NgbAccordion | undefined {
  return this.accordionList.find(acc => acc.id === id);
}

getAccordionItemById(id: string): NgbAccordionItem | undefined {
  return this.accordionItemList.find(item => item.id === id);
}

3. 导航时调用方法获取实例并展开：

navigateToPanel(targetId: string, parentIds: string[]) {
  const targetItem = this.getAccordionItemById(targetId);
  targetItem?.expand();

  parentIds.forEach(id => {
    const parentAcc = this.getAccordionById(id);
    parentAcc?.expand();
  });
}

注意：如果面板是动态新增的，需要监听QueryList的changes事件，确保能获取到最新的实例：

ngAfterViewInit() {
  this.accordionList.changes.subscribe(() => {
    // 实例集合更新后的逻辑
  });
  this.accordionItemList.changes.subscribe(() => {
    // 实例集合更新后的逻辑
  });
}

这两种方法都能直接拿到指令实例，避免DOM操作，完美满足你调用expand()方法的需求。

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