[英]Nesting ng-bootstrap tabs (Angular 2)
我正在尝试嵌套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>
更新
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>
您可以生成任意数量的嵌套选项卡,例如:
<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>
它的工作原理是因为每个嵌入式模板都有自己的范围,而角度不会混合查询结果
对于面临同样问题的人。 Angular 4.3.6包含此问题的修复程序。
更多信息请访问: https : //github.com/ng-bootstrap/ng-bootstrap/issues/1433
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.