如何使用子组件使用 Tabset 组件创建动态选项卡？

【问题标题】：How to create dynamic tabs with Tabset component using a child component?如何使用子组件使用 Tabset 组件创建动态选项卡？
【发布时间】：2019-08-12 02:29:31
【问题描述】：

最近我开始使用 Angular 和 ng-bootstrap 进行开发。我正在借助 Reactive Forms 处理一个表单，其中包含一些 FormControls 和一个嵌套的 FormArray。对于 FormArray 中的每个元素，我想显示一个子组件，该子组件属于 ng-bootstrap 的 Tabset 组件的选项卡，但子组件不呈现。

表单分为两个组件：MainForm 和 SubForm。 MainForm 包含一些 FormControl、一个 FormArray、一个 Tabset 实例和 FormArray 中每个元素的 SubForm 实例。 SubForm 是 Tabset 的一个选项卡，其中包含一些输入字段的嵌套表单。

当我呈现 MainForm 时，会触发 API 调用并返回一些数据来填充表单。 MainForm 的 FormControls 和 FormArray 被填充，但 SubForm 不渲染。

我使用 Stackblitz 在 link 中以最小配置重现了该问题。

【问题讨论】：

标签： javascript angular ng-bootstrap

【解决方案1】：

这里的问题是NgbTabSet 组件无法初始化在SubForm 内部创建的NgbTab 指令，因为NgbTabSet 要求NgbTab 是ContentChildren

这意味着您必须将ngb-tab 元素保留在ngb-tabset 中作为投影内容：

main-form.component.html

<ngb-tabset type="pills" [destroyOnHide]="true">
  <ngb-tab *ngFor="let hobbie of hobbies.controls; let i=index" [attr.id]="index">
    <ng-template ngbTabTitle>
      <span>Hobbie {{ i + 1 }}</span>
    </ng-template>
    <ng-template ngbTabContent>
        <app-sub-form [subForm]="hobbie"></app-sub-form>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

我还认为它会迫使您保持 SubForm 组件不依赖于 NgbTabSet，以便您可以在其他地方使用此表单。

Forked Stackblitz

【讨论】：