Angular Material手风琴内加载动态组件失败问题求助

我完全懂你遇到的困扰——动态组件放折叠面板外正常，放里面就没动静还没报错，这核心原因是未展开的MatExpansionPanel内容默认是惰性渲染的：面板没展开时，<ng-container #piechartsContainer>根本没被挂载到DOM里，这时候你去创建组件自然找不到可依附的容器。

下面是针对性的解决步骤：

1. 正确获取所有面板内的容器元素 #

因为你用*ngFor循环生成了多个折叠面板，每个面板都有独立的piechartsContainer，所以不能用@ViewChild（只能获取单个元素），得用@ViewChildren来获取所有容器的列表：

import { Component, ViewChildren, QueryList, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { TcpComponent } from './tcp.component'; // 导入你的动态组件

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  data: any[]; // 你的数据源
  @ViewChildren('piechartsContainer', { read: ViewContainerRef }) containerList!: QueryList<ViewContainerRef>;

  constructor(private resolver: ComponentFactoryResolver) {}
}

2. 仅在面板展开时加载动态组件 #

修改你的toggle方法，判断面板状态，只有当面板展开时，再找到对应面板的容器并加载组件，同时避免重复创建：

toggle(panelHeader: any, item: any) {
  // 等待Angular完成DOM更新，确保容器已被渲染
  setTimeout(() => {
    // 找到当前item在数据源中的索引
    const index = this.data.indexOf(item);
    // 获取对应索引的容器实例
    const container = this.containerList.get(index);
    
    if (panelHeader._expanded && container) {
      // 先清空容器，避免重复创建组件
      container.clear();
      // 创建并挂载动态组件
      const componentFactory = this.resolver.resolveComponentFactory(TcpComponent);
      const componentRef = container.createComponent(componentFactory);
      // 若需给动态组件传参，可在这里设置
      // componentRef.instance.targetData = item.detailData;
    } else if (!panelHeader._expanded && container) {
      // 面板折叠时销毁动态组件，防止内存泄漏
      container.clear();
    }
  });
}

3. 模板保持原有结构即可 #

你的现有模板无需修改，我们已经通过@ViewChildren关联了所有piechartsContainer：

<mat-accordion> 
  <mat-expansion-panel *ngFor="let item of data;" > 
    <mat-expansion-panel-header #panelH (click)="toggle(panelH,item)"> 
      <mat-panel-title> {{item.name}} </mat-panel-title> 
    </mat-expansion-panel-header> 
    <ng-container #piechartsContainer></ng-container> 
  </mat-expansion-panel> 
</mat-accordion>

额外注意事项 #

• 用setTimeout是为了等待Angular完成点击后的DOM更新，确保容器已经存在于页面中，这时候获取容器才有效。
• 确保在模块中把TcpComponent添加到declarations数组；Angular 9及以上版本无需手动添加entryComponents，老版本则需要补充。
• 面板折叠时调用container.clear()可以销毁动态组件，避免内存堆积。

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