Angular2：執行標籤

我要實現我的網頁上的標籤，因此通過本教程Angular2：執行標籤

https://dzone.com/articles/learning-angular-2-creating-a-tabs-component但不知何故，它不適合我Plunker工作去了： http://plnkr.co/edit/jwBB7jd8KDXmndGBz4ZN?p=preview

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

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


}

和標籤組件：

import { Component, OnInit,ContentChildren,QueryList ,AfterContentInit} from '@angular/core'; 
    import { Tab } from './tab.component.ts'; 

    @Component({ 
     selector: 'tabs', 
     template: `<ul class="nav nav-tabs"> 
     <li *ngFor="let tab of tabs" [hidden]='true' (click)="selectTab(tab)" [class.active]="tab.active"> 
     <a>{{tab.title}}</a> 
     </li> 
    </ul> 
    <ng-content></ng-content>`, 
     styleUrls: ['./tabs.component.css'] 
    }) 
    export class Tabs implements AfterContentInit{ 
     @ContentChildren(Tab) tabs: QueryList<Tab>; 



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

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

    selectTab(tab: Tab){ 
     this.tabs.toArray().forEach(tab => tab.active = false); 
     tab.active = true; 
    } 
    }

請注意：這是我第一次與Plunker合作，請原諒我。我希望有人能幫助我。

謝謝。

來源

2016-11-17 Roxy

改進Plunker http://plnkr.co/edit/Mdj9llvGiEyMBmbSRoo7?p=preview但它拋出一個錯誤約'區不defined'（也是一個新的Angular2 TS Plunker模板） –

角度未加載。當你創建它時，你需要將你的plunker設置爲角度2應用程序。

來源

2016-11-17 14:05:41 Mika

我有一個非常簡單的解決方案 home.component.ts

<ul class="tabs"> 
<li [ngClass]=" {'active-tab': tab==1 }"><a (click)=" tab = 1 " href="javascript:void(0)">Tab 1</a></li> 
<li [ngClass]=" {'active-tab': tab==2 }"><a (click)=" tab = 2 " href="javascript:void(0)">Tab 2</a></li> 
<li [ngClass]=" {'active-tab': tab==3 }"><a (click)=" tab = 3 " href="javascript:void(0)">Tab 3</a></li>df 
</ul> 

<div class="tab-panel" id="tabPanel1" *ngIf="tab==1"> 
    ABC TAB 1 
</div> 
<div class="tab-panel" id="tabPanel2" *ngIf="tab==2"> 
    ABC TAB 2 
</div> 
<div class="tab-panel" id="tabPanel3" *ngIf="tab==3"> 
    ABC TAB 3 
</div>

這是很容易的，而無需使用任何第三方組件如果你想活躍在頁面加載任何選項卡，然後將值分配給「選項卡」變量

home.component.ts 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 
    tab: number = 3; 
    constructor() { } 

    ngOnInit() { 
    } 

}

來源

2017-03-24 12:29:24 Pooja

Angular2：執行標籤

回答

相關問題