Angular2使用div打包組件模板

Question

我有一個父組件模塊，用於跟蹤一堆子組件，我試圖讓每個子組件模板都包含一個不同的元素，以便我可以使用* ngIf。父組件可以有任意數量的子組件。

不是真的知道如何更好地解釋它，但實際上，這就是我有一個觀點：

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

<ng-content></ng-content> 

，其中n內容是子組件的模板。這可行，但我需要能夠做一些邏輯來隱藏child1模板，例如，當選擇child2時。我正在考慮用* ngIf來包裝每個子組件模板，但是我無法想出辦法做這樣的事情。

Answer 1

也許這對你有幫助。

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; 
}