for 루프의 ng-content

Question

부트 스트랩을 사용하여 탭 구성 요소를 만들려고합니다.

<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/ 을하지만 내 유스 케이스는 다르다.

for의 각 루프마다 다른 <ng-content>을 사용해야합니다. 이것은 내 plunker입니다 : https://plnkr.co/edit/N2p8Vx?p=preview 두 번째 설명을 두 번째 탭에 인쇄하고 첫 번째 것은 비워 둡니다.

감사합니다.

Answer 1

각도 재료가 탭 컨트롤을 구현하는 방법을 살펴볼 수 있습니다.

이이 방법 https://github.com/angular/angular/issues/18691에 대한 몇 가지주의 사항이 있지만 어쨌든 여기 버전 단순화 :

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