代码之家 › 专栏 › 技术社区 › Christophe Loeys

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

angular-components ngfor templating iteration angular

Christophe Loeys · 技术社区 · 7 年前

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

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

现在,我有了一个不同的组件,在加载viewoptions时将渲染该组件,该组件将显示一个选项卡,其中包含的信息取决于视图选项。因此,在本例中,有一个选项卡,其中必须显示图形和数据表,还有一个选项卡,其中必须显示查询结果。

在选项卡组件中,我有以下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>

因此,对于每个viewoption,都会呈现一个具有正确标题的选项卡。现在我的困惑在于我应该如何处理“ngbTabContent”这件事。在这里,我需要一个特定的组件,具体取决于viewoption,例如,如果它是一个“图形和表格”,那么我有该组件,对于“查询结果”,我有该组件,等等。。。我对Angular2还很陌生,我有一种感觉,我必须用某种模板来完成这项工作,但事实上,我必须根据ngFor中的“vo”参数动态完成这项工作,这让我的大脑有点混乱。

2 回复 | 直到 7 年前

SirWojtek 7 年前

您可以通过添加子路由来解决此问题。您需要放置 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 }
    ]
  },
];

Christophe Loeys 7 年前

在尝试了SirWojtek的解决方案后,我发现它并不真正适合我的需要(参见我对他的回答的评论),我发现以下链接,“动态组件”一段下提供的解决方案正是我所寻找的: https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36