Панели расширения Dynami c Загрузка контента

Question

У меня сложный сценарий, когда мне нужны панели расширения, чтобы иметь возможность загружать различные компоненты при расширении. Все панели сворачиваются по умолчанию при загрузке представления. Как только панель нажата, мне нужно получить данные с сервера и поместить результат в содержимое панели. Здесь так мало проблем:

1. Как обратиться к содержимому панели расширения, которая была задействована, когда у меня несколько панелей?
2. Как динамически загружать компоненты в содержимое этой панели ? Между прочим, компоненты отличаются друг от друга и зависят от загружаемого контента, хотя я знаю, какой будет отображаться при визуализации панели.

Answer 1

Вы можете использовать ComponentFactoryResolver для динамической загрузки данных. Для этого вы можете зарегистрировать обработчик событий для 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;
      }

Перед передачей данных в компонента, вы можете получить новый ответ.