Angular2：实现选项卡

Question

我想在我的页面上实现标签，因此完成了本教程

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 合作，请原谅。 我希望有人可以帮助我。

谢谢。

Answer 1

我有一个非常简单的解决方案 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>

这非常简单，无需使用任何第三方组件 如果您想在页面加载时激活任何选项卡 然后为“tab”变量赋值

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() {
  }

}

Answer 2

Angular 未加载。 创建时需要将 plunker 设置为 Angular 2 应用程序。