angular - 动态渲染组件

Question

我有这个数组:

this.dashboard = [
     {name: '<app-incassi-provvigioni></app-incassi-provvigioni>'},
     {name: '<app-scheda-punti-vendita></app-scheda-punti-vendita>'}
]

我在 ngOnInit 循环中填充这个数组。我想知道当我像这样在 html 中读取我的数组时如何呈现组件:

<gridster [options]="gridsterOptions">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
        <!-- your content here -->
        {{item.name}}
    </gridster-item>
</gridster>

当然，现在它返回包含在对象中的字符串，但我正试图找到一个解决方案来呈现组件。有可能吗？

更多详情:我正在开发一个仪表板类型的应用程序，我从数据库中检索用户 dashlet 的列表，并且我试图在主应用程序组件准备就绪后动态呈现这些组件。使用 Angular 7 和 Gridster2。

Answer 1

而不是传递组件标签名称(在您的情况下为“app-incassi-provvigioni”)，传递组件名称 (TestComponenet)，然后从您的 View 中调用该函数并使用指令动态呈​​现它。

例如:

<gridster [options]="gridsterOptions">
  <gridster-item [item]="item" *ngFor="let item of dashboard">
    <div class="inner">
      <ng-template dynamic-template> </ng-template>
    </div>
  </gridster-item>
</gridster>

dynamic-template 是一个指令，帮助我们加载组件。