嵌套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 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 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屋!