Angular2 kaydırma bileşeni şablonunun div ile

Question

Bir grup çocuk bileşenini takip eden bir ana bileşenim var, her bir alt öğe şablonunu çeşitliliğe sahip bir şablona sahip olmaya çalışıyorum, böylece * ngIf kullanabilirsiniz. Ana bileşenin herhangi bir sayıda çocuğu olabilir.

değil daha iyi nasıl açıklayacağımı gerçekten emin, ama bu bir görünümde olması aslında ne:

ng içerikli çocuk bileşenleri şablonu olan

<parent> 
    <child1></child1> 
    <child2></child2> 
</parent> 

<ng-content></ng-content> 

. Bu çalışır, ancak child2 seçildiğinde child1 şablonunu gizlemek için bazı mantıklara ihtiyacım var. Her bir alt öğe şablonunu bir * ngIf ile sarmayı düşünüyordum, ancak böyle bir şeyi yapmanın bir yolunu bulamıyorum

Answer 1

Belki bu size yardımcı olacaktır.

import { Component, ContentChildren, QueryList, AfterContentInit } from 'angular2/core'; 
    import { TabComponent } from './tab.component'; 

    @Component({ 
     selector: 'tabs', 
     template:` 
     <ul class="tab-container"> 
      <li class="tab" *ngFor="#tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active"> 
      <span>{{tab.tabTitle}}</span> 
      </li> 
     </ul> 
     <div class="tab-content"> 
      <ng-content></ng-content> 
     </div> 

     ` 
    }) 
    export class TabsComponent implements AfterContentInit { 

     @ContentChildren(TabComponent) tabs: QueryList<TabComponent>; 

     ngAfterContentInit() { 
      let activeTabs = this.tabs.filter((tab) => tab.active); 

      if (activeTabs.length === 0) { 
      this.selectTab(this.tabs.first); 
      } 
     } 

     selectTab(selectedTab: TabComponent) { 
      this.tabs.toArray().forEach(tab => tab.active = false); 

      selectedTab.active = true; 
     } 

    } 

import { Component, Input } from 'angular2/core'; 

@Component({ 
    selector: 'tab', 
    template: ` 
    <div [hidden]="!active" class="pane"> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class TabComponent { 
    @Input() tabTitle: string; 
    @Input() active = false; 
}