Question

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

当我有多个面板时，如何参考所使用的扩展面板的内容？
如何将组件动态加载到面板内容中？尽管我知道在渲染面板时要渲染哪个组件，但是组件之间的方式有所不同，并且取决于所加载的内容。

Answer 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;
      }

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

扩展面板动态内容加载

1 个答案: