嵌套ng-bootstrap选项卡（Angular 2） [英] Nesting ng-bootstrap tabs (Angular 2)

问题描述

我正在尝试嵌套ng-bootstrap选项卡小部件，但嵌套选项卡的内容未正确显示。当我点击嵌套标签时，内容本身就会消失。

I'm trying to nest a ng-bootstrap tab widget, but the content of the nested tab isn't shown properly. The moment I click on a nested tab, the content itself disappears.

最小化验

我做错了什么？

这个是查看代码：

            <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>

推荐答案

更新

Angular 4.3.6 包含此问题的修复程序。

Angular 4.3.6 contains a fix for this issue.

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

以前的版本

这是一个错误。

可能的解决方法可能是拥有额外的模板，如：

Possible workaround might be having additional template like:

<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示例

Plunker Example

您可以生成任意数量的嵌套标签，如：

And you can generate any number of nested tabs like:

<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示例

Plunker Example

它的工作原理是因为每个嵌入式模板都有自己的范围，并且角度不对t mix查询结果

It works because each of embedded template has its own scope and angular doesn't mix query results

这篇关于嵌套ng-bootstrap选项卡（Angular 2）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！