嵌套使用ng-bootstrap选项卡（Angular 2）

Question

我正在尝试嵌套一个ng-bootstrap标签小部件，但是嵌套标签的内容没有正确显示。一旦我点击嵌套标签，内容本身就会消失。

最小演示

我做错了什么？

这是视图代码：

            <ngb-tabset>
              <ngb-tab *ngFor="let tab of tabs">
                <ng-template ngbTabTitle>
                  {{ tab.title }}
                </ng-template>
                <ng-template ngbTabContent>
                  {{ tab.content }}

                  <ngb-tabset>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        1
                      </ng-template>
                      <ng-template ngbTabContent>
                        1
                      </ng-template>
                    </ngb-tab>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        2
                      </ng-template>
                      <ng-template ngbTabContent>
                        2
                      </ng-template>
                    </ngb-tab>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        3
                      </ng-template>
                      <ng-template ngbTabContent>
                        3
                      </ng-template>
                    </ngb-tab>
                  </ngb-tabset>

                </ng-template>
              </ngb-tab>
            </ngb-tabset>

- alexandernst

---

预期的视图是什么？你能添加线框图吗？ - Aravind

嗯，我认为已经很清楚了。我想要一个嵌套的选项卡小部件，这意味着每个一级选项卡都应该有一个带有自己选项卡的选项卡小部件。 - alexandernst

@alexandernst 这很奇怪，我建议在他们的官方 GitHub 存储库中添加 bug。我可以看到你已经在那里添加了评论 :D - Pankaj Parkar

@PankajParkar 是正确的。我尝试过了，这是 ng-bootstrap 的一个 bug。我会试着修复它。帮帮 Pankaj。 - Aravind

Answer 1

更新

Angular 4.3.6 包含了此问题的修复。

https://github.com/ng-bootstrap/ng-bootstrap/issues/1433#issuecomment-325104017

之前的版本

这是一个错误。

可能的解决方法是添加额外的模板，例如：

<ngb-tabset>
  <ngb-tab *ngFor="let tab of tabs">
    <ng-template ngbTabTitle>
      {{ tab.title }}
    </ng-template>
    <ng-template ngbTabContent>
      {{ tab.content }}
      <ng-container *ngTemplateOutlet="innerTabset"></ng-container>
    </ng-template>
  </ngb-tab>
</ngb-tabset>


<ng-template #innerTabset>
  <ngb-tabset>
    <ngb-tab>
      <ng-template ngbTabTitle>
        1
      </ng-template>
      <ng-template ngbTabContent>
        1
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle>
        2
      </ng-template>
      <ng-template ngbTabContent>
        2
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle>
        3
      </ng-template>
      <ng-template ngbTabContent>
        3
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
</ng-template>

Plunker示例

您可以生成任意数量的嵌套选项卡，例如：

<ng-container *ngTemplateOutlet="innerTabset; context: { $implicit: tabs }"></ng-container>

<ng-template #innerTabset let-tabs>
  <ngb-tabset>
    <ngb-tab *ngFor="let tab of tabs">
      <ng-template ngbTabTitle>
        {{ tab.title }}
      </ng-template>
      <ng-template ngbTabContent>
        {{ tab.content }}
        <ng-template [ngIf]="tab.children">
          <ng-container *ngTemplateOutlet="innerTabset; context: { $implicit: tab.children }"></ng-container>
        </ng-template>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
</ng-template>

Plunker示例

这是因为每个嵌入的模板都有自己的作用域，而Angular不会混合查询结果。

- yurzui

Answer 2

对于面临相同问题的人们，Angular 4.3.6 包含了此问题的修复。

更多信息请参见：https://github.com/ng-bootstrap/ng-bootstrap/issues/1433

- klagrida