扩展面板动态内容加载答案

【问题标题】：Expansion panels dynamic content loading扩展面板动态内容加载
【发布时间】：2020-05-25 01:05:54
【问题描述】：

我有一个复杂的场景，我需要扩展面板才能在扩展时加载不同的组件。加载视图时，所有面板默认折叠。单击面板后，我需要从服务器获取数据并将结果放入面板内容中。这里的挑战很少：

当我有多个面板时，如何引用展开面板的内容？
如何将组件动态加载到该面板内容中？顺便说一下，组件彼此不同，并且取决于正在加载的内容，尽管我知道在渲染面板时要渲染哪个。

【问题讨论】：

我也遇到了同样的问题，你找到解决办法了吗？
不，最终这个功能被放弃了。但是在处理它时，我的计划是在 TS 脚本中将 ViewChild 用于面板

标签： angular angular-material

【解决方案1】：

您可以使用ComponentFactoryResolver 动态加载数据。为此，您可以为expansion panel 的afterExpand 注册事件处理程序。您必须进行以下更改。

模板

      <mat-expansion-panel (afterExpand)="expand()">
         <mat-expansion-panel-header>
           Header
         </mat-expansion-panel-header>
         <!--where component will be loaded-->
         <ng-template component></ng-template>
      </mat-expansion-panel>

TS 文件

      @ViewChild(Component, {static: true}) component: Component;
      constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

      expand(){//method to load component when panel is expanded
           const componentFactory = 
          this.componentFactoryResolver.resolveComponentFactory(Component);

          const viewContainerRef = this.component.viewContainerRef;
          viewContainerRef.clear();

          const componentRef = viewContainerRef.createComponent(componentFactory);
          // here you can send data to dynamically loaded component
         (<Component>componentRef.instance).data = component.data;
      }

在将数据传递给组件之前，您可以获取新的响应。

【讨论】：