Question

我想构建一个容器，以容纳不同的组件，如下面的代码所示，并以仪表板样式显示它们。

<lib-container>
   <lib-kpi></lib-kpi>
   <lib-geo-list></lib-geo-list>
</lib-container>

我的容器组件当前如下所示：

<div class="grid-container">
  <h1 class="mat-h1">Container</h1>
  <mat-grid-list cols="2" rowHeight="350px">
    <mat-grid-tile *ngFor="let card of cards | async" [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">
            <div *ngIf="card.title == 'KPI'"><ng-content select='lib-kpi'></ng-content></div>
            <div *ngIf="card.title == 'GeoList'"><ng-content select='lib-geo-list'></ng-content></div>
          </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

这很好用，但是由于我事先不知道容器将接收哪些组件，因此无法使用这种静态方法。所以我已经尝试了以下方法：

<lib-container>
   <lib-kpi #widget></lib-kpi>
   <lib-geo-list #widget></lib-geo-list>
</lib-container>

这给了我一个可以在container.component.ts中访问的小部件组件的列表：

 @ContentChildren('widget') widgets: any;

  ngAfterContentInit() {
    console.log(this.widgets);
  }

但是如何在我的container.component.html中显示这些组件？

我尝试过：

<ng-container *ngFor="let widget of widgets">
  <ng-container *ngComponentOutlet="widget"></ng-container>
</ng-container>

但是它给了我以下错误信息： 找不到[object Object]的组件工厂。您是否将其添加到@ NgModule.entryComponents中？

可以帮忙吗？

角度：在仪表板组件中显示多个变量组件

0 个答案: