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

Question

最近我开始使用 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 未呈现。

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

Answer 1

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

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

ma​​in-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