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：执行标签

回答

相关问题