我正在尝试使用bootstrap创建一个选项卡组件。
<app-tabs>
<app-tab [label]="'label1'">Description 1</app-tab>
<app-tab [label]="'label2'">Description 2</app-tab>
</app-tabs>
我看了这篇文章:https://jurist.com/blog/2016/02/learning-ng2-creating-tab-component/但是我的用例不同。
我需要在for的每个循环中使用其他<ng-content>
。这是我的plunker:https://plnkr.co/edit/n2p8vx?p = preview它在第二个选项卡中打印两个说明,将第一个描述留为空。
感谢任何帮助!
您可以查看角度材料如何实现选项卡的控制。
有关这种方法有一些警告
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示例