如何仅在Mat Expansion Panel展开时加载子组件？

要实现仅在Mat展开面板展开时才渲染自定义组件并触发API调用，核心思路是条件渲染组件——利用面板的展开状态控制组件的创建时机，避免关闭时组件初始化导致API调用。

方法一：通过面板expanded属性结合*ngIf控制组件渲染 #

直接借助mat-expansion-panel的内置expanded状态，搭配Angular的*ngIf指令，只有当面板展开时才实例化自定义组件：

<mat-accordion>
  <!-- 循环生成展开面板 -->
  <mat-expansion-panel 
    *ngFor="let panelItem of panelItems; let idx = index"
    #expPanel="matExpansionPanel"
  >
    <mat-expansion-panel-header>
      <!-- 面板头部内容 -->
      {{ panelItem.headerTitle }}
    </mat-expansion-panel-header>

    <!-- 面板内容区域：仅展开时渲染自定义组件 -->
    <ng-template matExpansionPanelContent>
      <app-custom-component
        *ngIf="expPanel.expanded"
        [apiParam]="panelItem.apiParam"
      ></app-custom-component>
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>

原理说明 #

• #expPanel="matExpansionPanel"是模板引用变量，用于获取当前展开面板的实例状态；
• *ngIf="expPanel.expanded"会在面板展开时才创建app-custom-component实例，组件内的API调用逻辑（通常在ngOnInit钩子中）只会在组件初始化时执行；
• 面板关闭时，组件会被Angular销毁，彻底避免不必要的API请求。

方法二：通过opened事件触发API（适合需保留组件的场景） #

如果需要面板关闭时仍保留组件实例，仅延迟API调用，可借助面板的opened事件手动触发请求：

组件类代码 #

import { Component } from '@angular/core';
import { YourApiService } from './your-api.service';

@Component({
  selector: 'app-your-container',
  templateUrl: './your-container.component.html'
})
export class YourContainerComponent {
  panelItems = [/* 你的面板数据源 */];
  // 缓存API结果，避免重复请求
  apiCache: Record<string, any> = {};

  constructor(private apiService: YourApiService) {}

  onPanelOpen(itemId: string) {
    // 检查缓存，无数据时再调用API
    if (!this.apiCache[itemId]) {
      this.apiService.fetchData(itemId).subscribe(res => {
        this.apiCache[itemId] = res;
      });
    }
  }
}

模板代码 #

<mat-accordion>
  <mat-expansion-panel 
    *ngFor="let item of panelItems"
    (opened)="onPanelOpen(item.id)"
  >
    <mat-expansion-panel-header>{{ item.headerTitle }}</mat-expansion-panel-header>
    <app-custom-component
      [apiParam]="item.apiParam"
      [apiResult]="apiCache[item.id]"
    ></app-custom-component>
  </mat-expansion-panel>
</mat-accordion>

原理说明 #

• (opened)="onPanelOpen(item.id)"在面板首次打开时触发事件，手动调用API；
• 用apiCache存储已请求的数据，避免重复调用；
• 组件始终存在，但API仅在面板展开时触发（首次展开后缓存数据，再次展开不会重复请求）。

内容的提问来源于stack exchange，提问作者suraj p Yedre