嵌套 bootstrap 个选项卡 (Angular 2)
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 不会混合查询结果
对于面临同样问题的人。
Angular 4.3.6 包含针对此问题的修复程序。
这里有更多信息:https://github.com/ng-bootstrap/ng-bootstrap/issues/1433
我正在尝试嵌套 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 不会混合查询结果
对于面临同样问题的人。 Angular 4.3.6 包含针对此问题的修复程序。
这里有更多信息:https://github.com/ng-bootstrap/ng-bootstrap/issues/1433