前言

tab 就是可以分頁的標籤

如果有用 Bootstrap，那要用 tab 就會很簡單。

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>

<div class="tab-content">

<div id="home" class="tab-pane fade in active">

<h3>HOME</h3>

<p>…</p>

</div>

<div id="menu1" class="tab-pane fade">

<h3>Menu 1</h3>

<p>…</p>

</div>

<div id="menu2" class="tab-pane fade">

<h3>Menu 2</h3>

<p>…</p>

</div>

<div id="menu3" class="tab-pane fade">

<h3>Menu 3</h3>

<p>…</p>

</div>

</div>

但我們今天用 Angular 2 來硬幹一個！

Tab

實現一個 tab 大概會長這樣

<tabs>
    <tab>
        <p>This Tab Content 1</p>
    </tab>
    <tab>
        <p>This Tab Content 1</p>
    </tab>
    <tab>
        <p>This Tab Content 1</p>
    </tab>
</tabs>

我們並不想寫成這樣

<tabs [contents]="[...]"></tabs>

把所有 tab 的內容當變數傳遞，這會增加閱讀的難度。我們想要的是顯示層次明確的樣子，這樣的話就會用到 @ContentChild 裝飾器。

tab.ts

import {Component,Input} from '@angular/core';

@Component({

selector: 'tab',

template:         &lt;p [hidden]=&quot;!show&quot;&gt;             &lt;ng-content&gt;&lt;/ng-content&gt;         &lt;/p&gt;    

})

export class TabComponent {

@Input()

tabTitle:string;


show:boolean = false;



}

tabs.ts

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

@Component({

selector: 'tabs',

template:        &lt;ul class=&quot;tab-list&quot;&gt;            &lt;li *ngFor=&quot;let tab of tabs&quot; [class.active]=&quot;selectedTab===tab&quot; (click)=&quot;onSelect(tab)&quot;&gt;                {{tab.tabTitle}}            &lt;/li&gt;        &lt;/ul&gt;        &lt;ng-content&gt;&lt;/ng-content&gt;    ,

styles: [`

.tab-list{

list-style:none;

overflow:hidden;

padding:0;

color: white;

}


    .tab-list li{
        cursor:pointer;
        float:left;
        width:60px;
        height:30px;
        line-height:30px;
        text-align:center;
        background-color:gray;
    }

    .tab-list li:hover{
        background-color:#424242;
    }
    .tab-list li.active{
        background-color:black;
    }
`]



})

export class TabsComponent implements AfterContentInit {

@ContentChildren(TabComponent)

tabs:QueryList<TabComponent>;


selectedTab:TabComponent;

ngAfterContentInit() {
    this.select(this.tabs.first);
}

onSelect(tab) {
    this.select(tab);
}

select(tab) {
    this.tabs.forEach((item)=&gt;{
        item.show = false;
    });

    this.selectedTab = tab;
    this.selectedTab.show = true;
}



}

app.ts

import {Component,ContentChildren,QueryList} from '@angular/core';
import {TabsComponent} from './tabs';
import {TabComponent} from './tab';

@Component({

selector: 'my-app',

template:         &lt;h2&gt;App Component&lt;/h2&gt;         &lt;tabs&gt;             &lt;tab tabTitle=&quot;First&quot;&gt;                 &lt;p&gt;This Tab Content 1&lt;/p&gt;             &lt;/tab&gt;             &lt;tab tabTitle=&quot;Second&quot;&gt;                 &lt;p&gt;This Tab Content 2&lt;/p&gt;             &lt;/tab&gt;             &lt;tab tabTitle=&quot;third&quot;&gt;                 &lt;p&gt;This Tab Content 3&lt;/p&gt;             &lt;/tab&gt;         &lt;/tabs&gt;    ,

directives: [TabsComponent,TabComponent]

})

export class AppComponent {

}

範例

Plunker