Estoy tratando de anidar un widget de pestaña ng-bootstrap, pero el contenido de la pestaña anidada no se muestra correctamente. En el momento en que hago clic en una pestaña anidada, el contenido desaparece.
¿Qué estoy haciendo mal?
Este es el código de la vista:
<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>Actualizar
Angular 4.3.6 contiene una solución para este problema.
https://github.com/ng-bootstrap/ng-bootstrap/issues/1433#issuecomment-325104017
Versión previa
es un error
La posible solución podría ser tener una plantilla adicional como:
<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>Y puede generar cualquier número de pestañas anidadas como:
<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>Funciona porque cada plantilla incrustada tiene su propio alcance y angular no mezcla los resultados de las consultas.
Para las personas que se enfrentan al mismo problema. Angular 4.3.6 contiene una solución para este problema.
Más información aquí: https://github.com/ng-bootstrap/ng-bootstrap/issues/1433