Создание hostview без элемента host?

Question

Я использую @angular/material:material-dashboard, а мозаика сетки должна иметь бизнес-логику, которая должна быть

1. Отдельные компоненты
2. Динамически загружаться

Использованиегенерация простого динамического компонента кажется проблематичной, потому что мозаичные элементы не могут правильно стилизоваться.В частности, они будут «появляться» с 0 шириной и высотой (фактически не делая их видимыми, хотя они находятся в DOM.

Я рассмотрел использование встроенного представления, но они не соответствуют сценарию использованияи использование инжектора громоздко.

Вот что я делаю: controller:

export class DashboardComponent implements AfterViewInit {
  @ViewChild(WidgetDirective) widgetHost: WidgetDirective;

  constructor(private widgetService: WidgetService,
    private cd: ChangeDetectorRef, private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    this.widgetService.getWidgets().subscribe(widgets => {
      let viewContainerRef = this.widgetHost.viewContainerRef;
      for (const widget of widgets) {
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(widget['component']);
        let componentRef = viewContainerRef.createComponent(componentFactory);
        (<Widget>componentRef.instance).data = widget['data'];
      }
      this.cd.detectChanges();
    });
  }
}

view:

<div class="grid-container">
  <mat-grid-list cols="2" rowHeight="350px">
    <ng-template widget></ng-template>
  </mat-grid-list>
</div>

А вот виджет виджета:

<mat-grid-tile [colspan]="card.cols" [rowspan]="card.rows">
  <mat-card class="dashboard-card">
    <mat-card-header>
      <mat-card-title>
        {{card.title}}
        <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu" xPosition="before">
          <button mat-menu-item>Expand</button>
          <button mat-menu-item>Remove</button>
        </mat-menu>
      </mat-card-title>
    </mat-card-header>
    <mat-card-content class="dashboard-card-content">
      <p>
        Morbi interdum lobortis ac dapibus quisque quam praesent? Duis diam felis adipiscing arcu viverra. Taciti neque dictum elementum! Elementum cras enim congue hendrerit. Sodales arcu dapibus ipsum molestie hendrerit id risus morbi habitasse tellus leo. Penatibus elementum dictum nec molestie! Ultricies tempus sagittis massa erat primis faucibus sit ad habitasse condimentum lobortis sit! Eros sagittis faucibus nullam amet neque, facilisi iaculis inceptos. Vivamus orci felis torquent ultricies vitae tincidunt suspendisse commodo mollis nam. Nullam turpis non semper aliquam vitae varius cras vivamus semper!
        Sed gravida tortor nam lacinia conubia conubia rhoncus himenaeos. Sagittis parturient lobortis curabitur pretium cras dui. Massa auctor feugiat nibh magna. Senectus torquent convallis class volutpat, tortor sapien duis justo ante magnis. Fusce ornare netus hendrerit consectetur himenaeos quam venenatis ipsum vivamus iaculis lacinia. Nisl ad aliquet eu risus dictum eros. Dolor pretium odio natoque. Class iaculis tincidunt tincidunt laoreet? Ac varius, per penatibus pellentesque. Morbi nascetur euismod cras duis tortor vestibulum molestie eget hac varius montes. Cras mi etiam, ultrices donec integer! Blandit facilisis molestie phasellus dapibus, gravida arcu congue. Tellus ornare aliquet dolor nullam.
        Rutrum id, metus ridiculus adipiscing fames nullam? Tempus, vivamus sem sodales accumsan. Magnis nam, lectus orci integer. Est leo ornare sagittis varius dignissim. Etiam eu congue, cras nulla nascetur nisi sapien aptent tristique turpis euismod dapibus! Mollis libero habitasse class blandit tincidunt. Est mus interdum fringilla, a vestibulum natoque praesent vulputate egestas mi quam lobortis. Vel ut lectus hac, class taciti congue molestie sociis. Montes dis pharetra mus. Nullam cubilia sociosqu class sodales. Consequat sapien pretium leo pretium cursus fringilla magnis in augue vitae accumsan! Fames!
        Mattis quisque facilisi pharetra felis aliquam aliquet dignissim aenean? Curabitur lorem per at quis varius mollis maecenas dictum hendrerit. Ante scelerisque aliquam tincidunt integer praesent consectetur ipsum elit sagittis eu sollicitudin. Consectetur pulvinar class metus laoreet sit arcu sollicitudin parturient, facilisis commodo cubilia. Est fermentum nascetur dictum lacinia eleifend dictum nisl ultrices, habitasse venenatis. Magna.
        Consectetur sagittis proin suspendisse ad interdum vulputate potenti consequat. Et fusce pharetra id mauris. Diam ac dictumst aliquet eleifend nunc tempus at sed ridiculus suspendisse rhoncus. Consectetur imperdiet egestas integer nisl tristique integer? Sit neque, scelerisque sapien ac. Libero tellus pellentesque morbi leo fringilla vivamus morbi sociis consectetur. Nulla luctus orci sit mattis scelerisque est. Pharetra praesent sociosqu ornare quis suscipit proin, dolor dapibus habitasse nibh class condimentum? Platea proin nullam elementum etiam facilisi.
      </p>
    </mat-card-content>
  </mat-card>
</mat-grid-tile>

с некоторым минимальным кодом для изменения поля данных в поле карты.

Вот что я хочу:

<mat-grid-list ...>
  <div>
     <mat-grid-tile ...>

Но вот что вместо этого происходит

<mat-grid-list ...>
  <div>
    <widgetname1>
       <mat-grid-tile ...>

Что убивает функцию списка сетки. Кажется странным, что эту функцию невозможно использовать с динамически добавляемыми компонентами, поэтому должно быть что-то, что я пропускаю, или решение просто удалить элемент хоста и вызвать егодень ...