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

Question

对于我的应用程序，我有一个用户可以选择的“语句”下拉列表。当用户选择特定语句时，将进行API调用，以检索如何显示此数据的方式，称为ViewOptions。格式如下：

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

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

在选项卡组件中，我有以下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'的事情。在这里，我想要一个特定的组件，取决于viewoption，例如，如果它是一个“图表和表”，我有组件，“查询结果”我有组件，依此类推......我是Angular2的新手，我有一种感觉，我将不得不用某种模板来做这件事，但事实上，我必须动态地做这个，这取决于* ng中的'vo'参数。我的脑子里有点混乱。

Answer 1

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

您的父组件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的解决方案并且没有真正找到适合我的需求之后（请参阅我对他的回答的评论），我发现以下链接和“动态组件”段落下提供的解决方案正是我所寻找的：https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36