ng-content for循环 [英] ng-content in for loop
问题描述
我正在尝试使用引导程序创建选项卡组件.
I'm trying to create a tab component using bootstrap.
<app-tabs>
<app-tab [label]="'label1'">Description 1</app-tab>
<app-tab [label]="'label2'">Description 2</app-tab>
</app-tabs>
我看了这篇文章: https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/ 但是我的用例是不同的.
I had a look at this article: https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/ but my use case is different.
我需要在for的每个循环中使用不同的<ng-content>
.
这是我的朋克: https://plnkr.co/edit/N2p8Vx?p=preview一个>
它将在第二个选项卡中同时打印这两个描述,而第一个则为空.
I need to use a different <ng-content>
in each loop of the for.
This is my plunker: https://plnkr.co/edit/N2p8Vx?p=preview
It prints both descriptions in the second tab, leaving the first one empty.
感谢任何帮助!
推荐答案
您可以看看角度材料如何实现制表符控制.
You can take a look at how angular material implemented tabs control.
对此方法有一些注意事项 https://github.com/angular/angular/issues/18691 ,但是无论如何,这里是简化版本:
There are some caveats about this approach https://github.com/angular/angular/issues/18691 but anyway here is simplified version:
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
这篇关于ng-content for循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!