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

【问题标题】：Dynamically create a component in Angular2 depending on data from an API call根据来自 API 调用的数据在 Angular2 中动态创建组件
【发布时间】：2017-12-21 10:16:19
【问题描述】：

对于我的应用程序，我有一个用户可以选择的“语句”下拉列表。当用户选择特定语句时，将进行一个 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”这件事。在这里，我想要一个取决于视图选项的特定组件，例如，如果它是“图形和表格”，我有组件，对于“查询结果”，我有组件，等等......我对 Angular2 和我有一种感觉，我将不得不使用某种模板来执行此操作，但事实上我必须根据 *ngFor 中的 'vo' 参数动态地执行此操作，这让我有点头疼。

【问题讨论】：

我建议你从Here is what you need to know about dynamic components in Angular的文章开始
谢谢，您提供的链接将我推向了正确的方向。

标签： angular iteration templating ngfor angular-components

【解决方案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 }
    ]
  },
];

【讨论】：

我有点明白你的意思并尝试了，但我已经在某处使用路由器插座，担心这样做，我的其他路由器插座也会匹配此导航。我的怀疑是正确的，所以现在它只是用这条路由替换了我的整个页面（路由器插座所在的位置），而不仅仅是正确选项卡的内容......我可以绕过这个还是在这种情况下另一个解决方案更合适?
没关系，我错过了你必须将路由链接到父组件的部分，derp...我修复了它，它就像这样工作，非常感谢。 :)
别再介意了......首先，我已经发现这个解决方案有点恶心，我不想要另一个路由器插座并弄乱我的路线只是为了显示一些标签，其次，虽然它似乎有效，但每当我切换标签时，它最初都有效，但是当我切换回来时，该标签的内容没有显示。我找到了另一种解决方案（在我看来也更简洁），它实际上是“模板”标签的内容。
当我在思考答案的时候，我首先想到的是动态加载的组件。该解决方案的问题在于，在重新加载或链接页面时，您会丢失选项卡状态。

【解决方案2】：

在尝试了 SirWojtek 的解决方案后并没有真正找到它适合我的需求（请参阅我的 cmets 关于他的回答），我找到了以下链接，并且在“动态组件”段落下提供的解决方案正是我正在寻找的：@ 987654321@

【讨论】：