ng-Inhalt in for-Schleife

Question

Ich versuche, eine Registerkarte Komponente mit Bootstrap erstellen.

<app-tabs> 
    <app-tab [label]="'label1'">Description 1</app-tab> 
    <app-tab [label]="'label2'">Description 2</app-tab> 
</app-tabs> 

hatte ich einen Blick auf diesen Artikel: https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/ aber mein Anwendungsfall ist anders.

Ich brauche eine andere <ng-content> in jeder Schleife der für. Dies ist mein Plotter: Es druckt beide Beschreibungen in der zweiten Registerkarte, so dass die erste leer bleibt.

Schätzen Sie jede Hilfe!

Answer 1

Sie können sehen, wie eckige Material implementiert Registerkarten steuern.

Es gibt einige Einsprüche über diesen Ansatz https://github.com/angular/angular/issues/18691 aber trotzdem hier ist Version vereinfacht:

tab.component.ts

@Component({ 
    selector: 'app-tab', 
    template: ` 
    <ng-template> 
     <ng-content></ng-content> 
    </ng-template>` 
}) 
export class TabComponent { 
    ... 

    @ViewChild(TemplateRef) template: TemplateRef<any>; 
} 

tabs.component.ts

<div *ngFor="let tab of tabs; let i = index" 
      class="tab-pane" [ngClass]="{'active': i === 0}"...> 
    <ng-container *ngTemplateOutlet="tab.template"></ng-container> 
</div> 

Plunker Example