Ng-bootstrap手风琴关闭时内部组件仍初始化引发多余HTTP请求

问题核心：使用*ngFor生成ng-bootstrap手风琴项时，即使所有项初始关闭，内部的<app-room-settings>组件仍会触发生命周期并发起HTTP请求，即便destroyOnHide保持默认true也无效。

原因分析 #

destroyOnHide属性的作用是当手风琴项从“显示”切换到“隐藏”时销毁组件，但初始渲染阶段，所有手风琴项的内容（包括内部组件）已经被Angular渲染到DOM中，只是通过CSS设置为隐藏状态，因此组件会正常初始化并执行HTTP请求。

解决方案 #

通过条件渲染控制组件的初始化时机，仅当手风琴项被打开时才加载<app-room-settings>：

1. 在组件类中添加变量跟踪当前激活的手风琴项ID：

activeAccordionId: string | null = null;

2. 修改模板代码，结合*ngIf和手风琴的shown/hidden事件：

<div
  class="mt-2"
  #accordion="ngbAccordion"
  ngbAccordion
  [closeOthers]="true"
  (shown)="activeAccordionId = $event"
  (hidden)="activeAccordionId = null"
>
  <div
    ngbAccordionItem
    *ngFor="let room of rooms; let index = index"
    [ngbAccordionItem]="index.toString()"
  >
    <div ngbAccordionHeader>
      <button
        ngbAccordionButton
        [style.backgroundColor]="room.bgColorHex"
        [style.color]="room.textColorHex"
      >
        {{ room.name }}
      </button>
    </div>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <app-room-settings
          *ngIf="activeAccordionId === index.toString()"
          [room]="room"
          (roomChanged)="roomChanged.emit()"
        ></app-room-settings>
      </div>
    </div>
  </div>
</div>

原理说明 #

• *ngIf="activeAccordionId === index.toString()"确保只有当前打开的手风琴项对应的<app-room-settings>才会被初始化，彻底避免初始时批量发起HTTP请求。
• (shown)="activeAccordionId = $event"在手风琴项打开时更新激活ID，触发组件初始化。
• (hidden)="activeAccordionId = null"在手风琴项关闭时清空激活ID，结合destroyOnHide=true会销毁组件，释放资源。

如果需要保留组件状态（比如关闭后再次打开不想重新请求），可以将destroyOnHide设为false，此时组件会被隐藏而非销毁，状态得以保留。

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