Вложенность вкладок ng-bootstrap (угловая 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>
2 ответов:
Обновить
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>Кажется, это работает, потому что каждый из встроенных шаблонов имеет свою собственную область видимости, а угловой-нет результаты запроса mix
Для людей, которые сталкиваются с той же проблемой. Angular 4.3.6 содержит исправление для этой проблемы.
Более подробная информация здесь: https://github.com/ng-bootstrap/ng-bootstrap/issues/1433
Comments