根据来自 API 调用的数据在 Angular2 中动态创建组件

Question

对于我的应用程序，我有一个 'Statements' 的下拉列表，用户可以 select。当用户 select 执行特定语句时，会进行 API 调用以检索必须如何显示此数据的方式，称为 ViewOptions。格式如下：

[
  {
    "Id": 1,
    "OptionName": "Graph and table"
  },
  {
    "Id": 3,
    "OptionName": "Query results"
  }
]

现在我有一个不同的组件，它将在加载视图选项时呈现，它应该根据视图选项显示一个包含信息的选项卡。因此，在此示例中，有一个选项卡必须显示图表和 table 数据，另一个选项卡必须显示查询结果。

在选项卡组件中，我有以下 HTML:

<ngb-tabset justify="justified" *ngIf="viewOptions.length">
  <ngb-tab *ngFor="let vo of viewOptions" id="{{vo.Id}}">
    <ng-template ngbTabTitle>{{vo.OptionName}}</ng-template>
    <ng-template ngbTabContent></ng-template>
  </ngb-tab>
</ngb-tabset>

因此，对于每个视图选项，将呈现一个带有正确标题的选项卡。现在我的困惑在于我应该如何处理 'ngbTabContent' 事情。在这里，我想要一个取决于视图选项的特定组件，例如，如果它是 "Graph and table"，我有组件，对于 "Query results"，我有组件，依此类推......我对 Angular2 很陌生我有一种感觉，我将不得不通过某种模板来做到这一点，但事实上我必须根据 *ngFor 中的 'vo' 参数动态地做到这一点，这让我有点困惑。

Answer 1

可以通过添加子路由来解决。您需要放置 router-outlet 而不是 ngTabContent，link 您的动态组件作为子路由并重定向到正确的子路由。

你的父组件HTML

<ngb-tabset justify="justified" *ngIf="viewOptions.length">
  <ngb-tab *ngFor="let vo of viewOptions" id="{{vo.Id}}">
    <ng-template ngbTabTitle>{{vo.OptionName}}</ng-template>
  </ngb-tab>
  <router-outlet></router-outlet>
</ngb-tabset>

你的父组件代码

onBackendResponse(res) {
   if (res.dynamicComponent === 'first') {
      this.router.navigateByUrl('firstDynamic');
   } else if (res.dynamicComponent === 'second') {
      this.router.navigateByUrl('secondDynamic');
   }
}

你的路由

const appRoutes: Routes = [ 
  {
    path: 'parent', component: ParentComponent, children: [
      { path: 'firstDynamic', component: FirstDynamic },
      { path: 'secondDynamic', component: SecondDynamic }
    ]
  },
];

Answer 2

在尝试了 SirWojtek 的解决方案后发现它并不真正适合我的需要（请参阅我对他的回答的评论），我发现了以下 link 并且 "Dynamic Components" 段下提供的解决方案正是我在找什么：https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36

根据来自 API 调用的数据在 Angular2 中动态创建组件

Dynamically create a component in Angular2 depending on data from an API call

iteration

templating

ngfor

angular-components

angular